NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
Стек 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')
}
...