Angular v16中ExpressionChangedAfterItHasBeenCheckedError报错求助

我创建了一个使用Angular v16和NgRx的简单应用，可通过示例复现问题。

复现步骤 #

• 加载应用后，点击路径：Adresse > Submit > any link

错误信息 #

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'. Expression location: BodyComponent component.

相关代码片段 #

body.component.ts #

ngAfterViewInit() {
  this.listSubscription = this.service
    .getItemModeState()
    .subscribe((result) => {
      this.itemMode = result;
      console.log('TEST:', result);
    });
}

body.component.html #

<ng-container *ngIf="itemMode >= ItemMode.List"> <a> List</a> > </ng-container>

item.component.ts #

ngAfterViewInit() {
  this.service.setItemMode(ItemMode.Item);
}

query.component.ts #

ngAfterViewInit() {
  this.service.setItemMode(ItemMode.Item);
}

service.ts #

getItemModeState(): Observable<ItemMode> {
  return this.store.pipe(
    select((state) => state.siteState.itemMode),
    startWith(ItemMode.List)
  );
}

setItemMode(payload: ItemMode): void {
  this.store.dispatch(Actions.setItemMode({ payload: payload }));
}

补充说明 #

• Body组件是Item和Query组件的父组件，Item和Query组件会更新itemMode状态，Body组件则更新导航。
• 除抛出的错误外，功能均正常运行，调试后未找到原因，请求技术支持。

内容的提问来源于stack exchange，提问作者Jason