Как использовать ngModel в ion-checkbox?

Я пытаюсь использовать с ngModel, но ngModel там не работает. Мой код:

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

Но я получаю сообщение об ошибке:

ИСКЛЮЧЕНИЕ: выражение «проверено в AddInterestItem@5:2» изменилось после проверки. Предыдущее значение: «ложь». Текущее значение: «false» в [проверено в 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} 
];

ionic-framework javascript angular ionic2
person Maksim    schedule 21.01.2016    source источник
comment
Это сообщение об ошибке связано не с ngModel, а с ="item.checked". You seem to change item.checked`, что несовместимо с обнаружением изменений по умолчанию в Angulars. Пожалуйста, предоставьте более подробную информацию о том, как это выглядит в вашем коде.   -  person Günter Zöchbauer    schedule 21.01.2016
comment
Кажется, вы меняете значения каким-то неожиданным образом. Это еще недостаточно информации.   -  person Günter Zöchbauer    schedule 21.01.2016

Ответы (2)


arrow_upward
5
arrow_downward

Я не знаком с <ion-checkbox>. Но когда я попытался повторить вашу историю с обычным <input type="checkbox" />, я не смог добиться успеха, применив ngFor к input type="checkbox" напрямую. Итак, что я сделал, я взял <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>
person micronyks    schedule 21.01.2016
comment
Да, я думаю, что это правильный способ использования ng-for. В ночном билде от Ionic про чекбоксы Заворачивают тоже в контейнер +1 - person Bernhard Miehl; 21.01.2016

arrow_upward
2
arrow_downward

Просто быстрое обновление для Ionic 4:

HTML:

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

Ts:

iLikeIt={isChecked:false}
person diacode    schedule 22.04.2020