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>

But I get an error:

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]

example data:

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

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>

But I get an error:

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]

example data:

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

• javascript
• angular
• ionic-framework
• ionic2

• 1 This error message is not related to ngModel but to ="item.checked". You seem to change item.checked` in a way that is not patible with Angulars default change detection. Please provide more details about how this looks in your code. – Günter Zöchbauer Commented Jan 21, 2016 at 7:42
• 1 Seems you are changing the values in some unexpected way. This is still not enough information. – Günter Zöchbauer Commented Jan 21, 2016 at 7:48

2 Answers 2

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.

I feel like MyAnswer could help you further.

doesn't work in 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/*.

Worked properly

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

Just a quick update for Ionic 4:

HTML:

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

Ts:

iLikeIt={isChecked:false}