javascript - 如何在 ion-checkbox 中使用 ngModel？

Question

我正在尝试与 ngModel 一起使用，但 ngModel 在那里不起作用。我的代码：

<ion-checkbox *ngFor="#item of items" [(ngModel)]="item.checked">
  {{item.name}}
</ion-checkbox>

但我收到一个错误：

例外：表达式“在 AddInterestItem@5:2 中检查”在检查后已更改。以前的值：“假”。当前值：[在 AddInterestItem@5:2 中签入]中的“假”

示例数据：

this.items = [ 
  {name: 'Dancing', checked: false}, 
  {name: 'Jazz', checked: false}, 
  {name: 'Metal', checked: true}, 
  {name: 'Pop', checked: false}, 
  {name: 'Rock\'n\'Roll', checked: false}, 
  {name: 'Folk Metal', checked: true} 
];

Answer 1

我不熟悉<ion-checkbox>。但是当我试图用 normal 重复你的故事时 <input type="checkbox" />，我无法通过input type="checkbox"直接应用 ngFor 来获得成功。所以我做了什么，我<ul><li *ngFor="#item of items" >把我input type="checkbox"的放在里面，它开始按预期工作。

我觉得MyAnswer可以进一步帮助您。

在我的情况下不起作用

<input  type="checkbox" *ngFor="#item of items" [(ngModel)]="item.checked" />{{item.name}}  
/* I don't know some error occurs. you can check my plunkr by modifying it/*.

工作正常

    <ul>
        <li *ngFor="#item of items">{{item.name}}
            <input type="checkbox" [(ngModel)]="item.checked" />
        </li>
    </ul>

Answer 2

Ionic 4 的快速更新：

HTML：

<ion-checkbox [(ngModel)]="iLikeIt.isChecked"></ion-checkbox>

TS：

iLikeIt={isChecked:false}