如何在離子複選框中使用ngModel？

我正在嘗試使用ngModel，但ngModel不起作用。我的代碼：如何在離子複選框中使用ngModel？

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

但我得到一個錯誤：

EXCEPTION: Expression 'checked in [email protected]:2' has changed after it was checked. Previous value: 'false'. Current value: 'false' in [checked in [email protected]: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} 
];

來源

2016-01-21 Maksim

曾爲此錯誤消息是不相關的'ngModel'而是'= 「item.checked」。您似乎更改'item.checked'的方式與Angulars默認更改檢測不兼容。請提供關於這在代碼中的外觀的更多細節。 –

似乎你正在以某種意想不到的方式改變這些值。這還不夠信息。 –

我不熟悉<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>

來源

2016-01-21 08:12:32 micronyks

是的，我認爲這是你應該使用ng-for的正確方法。在Ionic關於複選框的每晚構建中，它們也將它們封裝到容器+1中 –

如何在離子複選框中使用ngModel？

回答

相關問題