ExpressionChangedAfterItHasBeenCheckedError解释

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

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

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

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

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

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

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

当前回答

我也遇到过类似的问题。查看生命周期钩子文档，我将ngAfterViewInit更改为ngAfterContentInit，它工作正常。

其他回答

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

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

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

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

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

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

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

在我的例子中，我在运行测试时在规范文件中遇到了这个问题。

我必须把ngIf改成[hidden]

<app-loading *ngIf="isLoading"></app-loading>

<app-loading [hidden]="!isLoading"></app-loading>

一旦我理解了Angular生命周期钩子以及它们与变更检测的关系，我就理解了很多。

我试图让Angular更新一个绑定到元素的*ngIf的全局标志，我试图在另一个组件的ngOnInit()生命周期钩子中更改这个标志。

根据文档，这个方法会在Angular检测到变化之后调用:

在第一个ngOnChanges()之后调用一次。

因此，在ngOnChanges()中更新标志不会启动变更检测。然后，一旦变更检测再次自然触发，标志的值就发生了变化，并抛出错误。

在我的例子中，我修改了这个:

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

它解决了这个问题:)

以下是我对正在发生的事情的看法。我还没有阅读文档，但我确信这是错误显示的部分原因。

*ngIf="isProcessing()"

当使用*ngIf时，它会在每次条件改变时通过添加或删除元素来物理地改变DOM。因此，如果条件在呈现给视图之前发生了变化(这在Angular的世界中是极有可能的)，就会抛出错误。请参阅开发和生产模式之间的解释。

[hidden]="isProcessing()"

当使用[hidden]时，它不会在物理上改变DOM，而只是从视图中隐藏元素，很可能在后面使用CSS。元素仍然在DOM中，但不可见，这取决于条件的值。这就是为什么使用[hidden]时不会出现错误的原因。

对于我的问题，我正在阅读github -“在afterViewInit中更改组件“非模型”值时的ExpressionChangedAfterItHasBeenCheckedError”，并决定添加ngModel

<input type="hidden" ngModel #clientName />

它解决了我的问题，我希望它能帮助到别人。

推荐文章