javascript - 如何在 ionic 复选框中使用 ngModel？

Question

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

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

但是我得到一个错误:

EXCEPTION: Expression 'checked in AddInterestItem@5:2' has changed after it was checked. Previous value: 'false'. Current value: 'false' in [checked in 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> .但是当我试图用正常的方式重复你的故事时 <input type="checkbox" /> ,我无法通过将 ngFor 应用于 input type="checkbox" 来获得成功直接地。所以我做了什么，我拿了<ul><li *ngFor="#item of items" >并把我的 input type="checkbox"在其中并开始按预期工作。

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

不适用于 mycase

<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>