У меня есть это html:
<ion-item *ngFor="let category of campaignCategories">
<ion-checkbox
class="campaign-filter-checkbox"
[checked]="isChecked(category)"
(ionChange)="selectCategory(category, $event)">
</ion-checkbox>
<ion-label>
{{ category.name }}
</ion-label>
</ion-item>
Мои .ts:
ngOnInit() {
this.initCategories();
}
initCategories() {
this.campaignService.getCategoryList()
.then((data: any) => {
this.campaignCategories = data;
this.campaignCategoriesSearch = data;
this.campaignCategoriesChecked = this.navParams.get('checkedCategories');
})
.catch(error => {
console.log(error);
}
);
}
selectCategory(category: CampaignCategoryInterface, ev) {
if (ev.detail.checked) {
if (!this.campaignCategoriesChecked.find(e => e.corporateCategoryId === category.corporateCategoryId)) {
this.campaignCategoriesChecked.push(category);
}
} else {
this.campaignCategoriesChecked.splice( this.campaignCategoriesChecked.indexOf(category), 1 );
}
return;
}
submit() {
this.modalController.dismiss(this.campaignCategoriesChecked);
}
isChecked(category: CampaignCategoryInterface) {
if (this.campaignCategoriesChecked.length === 0) {
return false;
}
const findCategory = this.campaignCategoriesChecked.find(e => e.id === category.id);
return !!findCategory;
}
Работает, но не во всех случаях. Иногда я получаю ошибку: Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'checked: true'. Current value: 'checked: false'
. Например:
- Я открываю всплывающее окно с фильтрами Я выбираю последние 2 категории
- Я открываю всплывающее окно с фильтрами, последние 2 категории проверяются
- Теперь, когда я пытаюсь чтобы снять последнюю категорию ie, обе опции не отмечены, я получаю ошибку, которую я написал + функция
selectCategory()
вызывается дважды, для обеих категорий, и я не понимаю, почему.
У вас есть идея?