ExpressionChangedAfterItHasBeenCheckedError解释

请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。

显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。

通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

或者使用如下构造函数强制检测更改:

this.isLoading = true;
this.cd.detectChanges();

但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。

当前回答

有一些有趣的答案，但我似乎没有找到一个符合我的需求，最接近的是来自@chittrang-mishra，它只指一个特定的功能，而不是像我的应用程序中那样有几个切换。

我不想使用[隐藏]利用*ngIf甚至不是DOM的一部分，所以我找到了以下解决方案，这可能不是最好的，因为它抑制错误而不是纠正它，但在我的情况下，我知道最终结果是正确的，这似乎对我的应用程序是可以的。

我所做的是实现AfterViewChecked，添加构造函数(私有changeDetector: ChangeDetectorRef){}，然后

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

我希望这能帮助到其他人，就像其他人帮助过我一样。

2018-10-18 01:17:11

其他回答

当值在同一个更改检测周期中更改多次时，将发生此错误。我在一个TypeScript getter中遇到了这个问题，它的返回值经常变化。要解决这个问题，您可以限制一个值，使其在每个更改检测周期中只能更改一次，如下所示:

import { v4 as uuid } from 'uuid'

private changeDetectionUuid: string
private prevChangeDetectionUuid: string
private value: Date

get frequentlyChangingValue(): any {
  if (this.changeDetectionUuid !== this.prevChangeDetectionUuid) {
    this.prevChangeDetectionUuid = this.changeDetectionUuid
    this.value = new Date()
  }
  return this.value
}

ngAfterContentChecked() {
  this.changeDetectionUuid = uuid()
}

HTML:

<div>{{ frequentlyChangingValue }}</div>

这里的基本方法是每个变更检测周期都有自己的uuid。当uuid改变时，您就知道您已经进入了下一个循环。如果循环已经改变，则更新值并返回它，否则只需返回与之前在此循环中返回的值相同的值。

这确保每个循环只返回一个值。这对于频繁更新值很有效，因为更改检测周期发生得非常频繁。

为了生成uuid，我使用了uuid npm模块，但你可以使用任何方法来生成唯一的随机uuid。

2021-10-12 14:10:37

尝试了上面建议的大部分解决方案。只有在这种情况下对我有用。我使用*ngIf来切换角材料的不确定渐进条基于api调用，它抛出ExpressionChangedAfterItHasBeenCheckedError。

在上述组件中:

constructor(
    private ngZone: NgZone,
    private changeDetectorRef: ChangeDetectorRef,
) {}

ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
        this.appService.appLoader$.subscribe(value => {
            this.loading = value;
            this.changeDetectorRef.detectChanges();
        });
    });
}

诀窍是使用ngzone绕过角分量的变化检测。

PS:不确定这是否是一个优雅的解决方案，但是使用AfterContentChecked和AfterViewChecked生命周期钩子必然会引起性能问题，因为你的应用程序会越来越大，因为它会被多次触发。

2020-06-24 21:43:05

我得到这个错误，因为我在模式中调度redux动作，当时模式还没有打开。我正在调度动作的瞬间模态组件接收输入。所以我把setTimeout放在那里，以确保模式是打开的，然后动作被分派。

2019-07-18 07:18:08

此错误表明应用程序中存在真正的问题，因此抛出异常是有意义的。

在devMode中，更改检测在每次常规的更改检测运行之后增加一个额外的回合，以检查模型是否已更改。

如果模型在常规变化检测轮和附加变化检测轮之间发生了变化，则这表明也发生了变化

变更检测本身导致了变更每次调用方法或getter都会返回不同的值

这两个都不好，因为不清楚如何继续，因为模型可能永远不会稳定。

如果Angular一直运行变更检测直到模型稳定，那么它可能会一直运行下去。如果Angular不运行变更检测，那么视图可能不会反映模型的当前状态。

参见Angular2中生产模式和开发模式的区别是什么?