请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
setTimeout或delay(0)如何解决这个问题?
以下是上面的代码修复问题的原因:
The initial value of the flag is false, and so the loading indicator will NOT be displayed initially
ngAfterViewInit() gets called, but the data source is not immediately called, so no modifications of the loading indicator will be made synchronously via ngAfterViewInit()
Angular then finishes rendering the view and reflects the latest data changes on the screen, and the Javascript VM turn completes
One moment later, the setTimeout() call (also used inside delay(0)) is triggered, and only then the data source loads its data
the loading flag is set to true, and the loading indicator will now be displayed
Angular finishes rendering the view, and reflects the latest changes on the screen, which causes the loading indicator to get displayed
这一次没有发生错误，因此这修复了错误消息。
来源:https://blog.angular-university.io/angular-debugging/
其他回答
参考文章https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
因此，变更检测背后的机制实际上是以同步执行变更检测和验证摘要的方式工作的。这意味着，如果我们异步更新属性，当验证循环运行时，值不会被更新，我们也不会得到ExpressionChanged…错误。我们得到这个错误的原因是，在验证过程中，Angular看到的值与它在变更检测阶段记录的值不同。所以为了避免....
1)使用changeDetectorRef
2)使用setTimeOut。这将在另一个VM中作为宏任务执行您的代码。Angular在验证过程中不会看到这些更改，你也不会得到这个错误。
setTimeout(() => {
this.isLoading = true;
});
3)如果你真的想在相同的虚拟机上执行你的代码使用
Promise.resolve(null).then(() => this.isLoading = true);
这将创建一个微任务。微任务队列是在当前同步代码完成执行之后处理的，因此对属性的更新将在验证步骤之后发生。
调试技巧
这个错误可能非常令人困惑，而且很容易对它发生的确切时间做出错误的假设。我发现在受影响的组件的适当位置添加大量这样的调试语句很有帮助。这有助于理解流程。
在父类的put语句中(确切的字符串'EXPRESSIONCHANGED'很重要)，但除此之外，这些只是例子:
console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');
在子/ services / timer回调函数中:
console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');
如果你手动运行detectChanges，添加日志记录:
console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
this.cdr.detectChanges();
然后在Chrome调试器只是过滤'EXPRESSIONCHANGES'。这将显示所有设置的流程和顺序，以及Angular抛出错误的确切位置。
您还可以单击灰色链接来放入断点。
另一件需要注意的事情是，如果你在整个应用程序中都有类似命名的属性(比如style.background)，请确保你正在调试你认为你在调试的属性——通过将它设置为一个模糊的颜色值。
一旦我理解了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() {
}
它解决了这个问题:)
我面临着同样的问题，因为我的组件中的一个数组的值发生了变化。但是我没有检测值变化的变化，而是将组件变化检测策略改为onPush(它将检测对象变化的变化，而不是值变化的变化)。
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
selector: -
......
})
在我的例子中，我在运行测试时在规范文件中遇到了这个问题。
我必须把ngIf改成[hidden]
<app-loading *ngIf="isLoading"></app-loading>
to
<app-loading [hidden]="!isLoading"></app-loading>
