如何在ion-checkbox中使用ngModel? [英] How to use ngModel in ion-checkbox?

问题描述

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

I'm trying to use with ngModel, but ngModel doesn't work there. My code:

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

但是我得到一个错误:

例外:检查后，在AddInterestItem @ 5:2中检查"的表达式已更改.先前的值:"false".当前值:[在AddInterestItem @ 5:2中检查]中的假"

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} 
];

推荐答案

我对< ion-checkbox> 不熟悉.但是当我试图以正常的方式重复你的故事< input type ="checkbox"/> ，我无法通过直接将ngFor应用于 input type ="checkbox" 来获得成功.所以我做了，我把< ul>< li * ngFor =项目的#item"> 放入其中，将我的 input type ="checkbox" 放入其中并开始按预期工作.

I am not familiar with <ion-checkbox>. But when i tried to repeat your story with normal <input type="checkbox" />, I couldn't get success by applying ngFor to input type="checkbox" directly. So what I did, I took <ul><li *ngFor="#item of items" > and put my input type="checkbox" within it and it started working as expected.

我觉得 MyAnswer 可以为您提供进一步的帮助.

I feel like MyAnswer could help you further.

不适用于我的情况

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

这篇关于如何在ion-checkbox中使用ngModel?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！