angular - ExpressionChangedAfterItHasBeenCheckedError : Expression has changed after it was checked - How to update template after Observable Value change

Question

我浏览了很多 SO 帖子，试图找到解决这个问题的方法，我发现唯一一个有 hack 实现的帖子。我也订阅了来自 ngrx 商店的 observable:

this.navigationSelected$ = this.store.pipe(select(currentlySelectedNavigation));

this.navigationSelected$.subscribe(res => {
  ...
});

使用 ngIf 取决于模板内的这个可观察值:

<profile-navigation *ngIf="(navigationSelected$ | async) == navigationLayout[0].location"></profile-navigation>

只要 navigationSelected$ 的值发生变化，就会抛出:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: false'.

并且模板不会更新。我设法通过运行 cdRef.detectChanges(); 绕过它。在订阅结束时。它工作正常，但错误仍然被抛出，而且如上所述，它似乎是一个 hack。

实现我想要做的最好的方法是什么？

Answer 1

我通常添加一个 debounceTime(0) 来解决这个问题。

this.navigationSelected$ = this.store.pipe(select(currentlySelectedNavigation), debounceTime());