时间戳

首页 > 解决方案 > Angular 和 NGXS 实验室操作正在执行：ExpressionChangedAfterItHasBeenCheckedError

angular - Angular 和 NGXS 实验室操作正在执行：ExpressionChangedAfterItHasBeenCheckedError

问题描述

这是我的仓库：https ://github.com/richarddavenport/why

我无法在 stackblitz.com 或 codesandbox.io 上重现此问题。

我收到了可怕的错误： 

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?

我的子组件视图： 

<div>{{fetching$ | async | json}}</div>
<form [formGroup]="form" ngxsForm="state.form"></form>

我的动作处理程序处于状态： 

  @Action(FetchAction)
  fetchAction() {
    console.log('Dispatched --> fetch');

    return of(true).pipe(delay(15000));
  }

如果delay()像这样将 更改为 0 ，则不会出现错误： 

  @Action(FetchAction)
  fetchAction() {
    console.log('Dispatched --> fetch');

    return of(true).pipe(delay(0));
  }

如果从子组件视图中删除表单，则不会出现错误： 

<div>{{fetching$ | async | json}}</div>

有些动作从ngxsForm指令中调度以最初同步状态，但我不知道它们是否导致了问题。

标签： angularngxs

解决方案

设置组件更改检测以ChangeDetectionStrategy.OnPush解决此问题。

推荐阅读