Фильтр NGRX, вызывающий ExpressionChangedAfterItHasBeenCheckedError

Question

Я использую фильтр NGRX для селектора, чтобы отфильтровать элементы в списке на основе значения состояния для фильтра. Когда страница загружается впервые, проблем нет.Если я обновляю страницу, я получаю ошибку ExpressionChangedAfterItHasBeenCheckedError.Если я удаляю / комментирую часть фильтра, ошибка исчезает.Есть ли способ выполнить селекторную фильтрацию, не вызывая этой ошибки?

export const getRatings = (state: MyState) => state.ratings
    .filter(rating =>
        state.filterByText === '' ||
        rating.name.toLowerCase().includes(state.filterByText.toLowerCase())
    );

Использовать в компоненте

ngOnInit() {
  this.ratings$ = this.store.select(myState.getRatings);
}

Использовать в html

<sb-rating-cards [ratings]="ratings$ | async"></sb-rating-cards>

Answer 1

С помощью RxJs вы можете трансформировать Observable как угодно (сделать его холодным, горячим, переиграть и т. Д.). Обнаружение изменений запускается, если испускается Input Observable, поэтому я думаю, что Angular-компонент предназначен для восприятия Observable в качестве входного, а не живого потока.

И это известная проблема (если можно так назвать).

Кто-то предлагает добавить pipe(delay(0)), что может быть быстрым способом ее решения (но в реальной жизни это может доставить вам проблемы, если на его создание потребуется некоторое время, потому что delay(0) похож на setTimeout - он работает в планировщике async, который запускается в очереди задач макросов (точно так же, как setTimeout)).

В противном случае передайте Observable как есть и подпишитесь в дочернем компоненте, где вы также управляете отпиской при уничтожении.