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

借助RxJ，您可以随意更改Observable（使其变冷，变热，重播等）。如果输入Observable发出，则会触发“更改检测”，因此我认为Angular组件旨在将Observable用作输入，而不是实时流。

这是known issue（如果可以这样称呼）。

有人建议添加一个pipe(delay(0))，这可能是解决它的一种快速方法（但在现实生活中，可能会给您带来问题，如果需要一些时间来构建，因为delay(0)与setTimeout类似-它运行在async调度程序上，该调度程序在宏任务队列中运行（就像setTimeout一样）。

否则，按原样传递Observable并订阅子组件，在子组件中销毁该组件也可以取消订阅。

NGRX过滤器导致ExpressionChangedAfterItHaHasBeenCheckedError

1 个答案: