angular - 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 作为输入，而不是实时流。

这是一个 known issue (如果你可以这样调用它的话)。

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

否则，按原样传递 Observable 并在子组件中订阅，您还可以在销毁时管理取消订阅。