NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Рейтинг: 0Ответов: 1Опубликовано: 14.04.2023

Стек Angular 15 + ionic 6. Я пытаюсь реализовать пользовательский фильтр по выбранным событиям. У меня есть некоторое кол-во чекбоксов и кнопки "Сохранить фильтры" и "Сбросить фильтры".

При нажатии на кнопку "Сохранить фильтры" я записываю выбранные события в массив ids в local storage, чтобы при последующем запуске приложения отметились соответствующие чекбоксы. Также у меня есть behaviorSubject свойство, в которое записываю начальное значение из local storage. Эта функция работает как надо.

При нажатии кнопки "Сбросить фильтры" я хочу удалить массив ids из local storage и установить в behaviorSubject начальное значение пустой массив, но я получаю ошибку NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Я пытался использовать ChangeDetectorRef, но безрезультатно.

Компонент html:

 ...

<ion-button color="medium" (click)="removeFilter()">Сбросить</ion-button>

....

<ion-checkbox slot="end" value="{{ type.id }}" (ionChange)="eventTypesChange(type.id)" 
[checked]="onCheckedEventType(type.id)"></ion-checkbox>

...

Компонент ts

...
eventTypesChange(typeId: number){
    if (!this.eventTypesFilter?.includes(typeId)) {
      this.eventTypesFilter?.push(typeId)
      this.filterService.setCountFiltersTolocalStorage(++this.countFilters) 
    } else {
      this.eventTypesFilter = this.eventTypesFilter.filter((id) => id !== typeId)
      if (this.countFilters !== 0)
        this.filterService.setCountFiltersTolocalStorage(--this.countFilters) 
    }
    this.filterService.setEventTypesTolocalStorage(this.eventTypesFilter) // записваем иассив в сервис
  }

 onCheckedEventType(typeId: number){
    return this.eventTypesFilter?.includes(typeId)
  }

removeFilter(){
    this.filterService.removeFilters()
    // this.cdr.detectChanges()
  }

...

FilterService

 ...
    
    public eventTypes: BehaviorSubject<Array<number>> = new BehaviorSubject<Array<number>>(this.getEventTypesFromlocalStorage()?.split(',').map(Number).filter(Boolean) || []) 
    
    ...
    setEventTypesTolocalStorage(eventTypes:number[] = this.eventTypes.value){
      localStorage.setItem('eventTypesFilter',eventTypes.toString())
      this.eventTypes.next(eventTypes)
    }

     removeFilters() {
        this.setEventTypesTolocalStorage([])
        localStorage.removeItem('eventTypesFilter')
      }
    
    ...

Ответы

▲ 0Принят

Проблема была в IonChange. я изменил ionChenge на click, и перенес его на итем вместо чекбокса, и все запело

<ion-item (click)="eventTypesChange(type.id)">
    <ion-checkbox slot="end" value="{{ type.id }}"  
    [checked]="onCheckedEventType(type.id)"></ion-checkbox>
</ion-item>