请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
在我的例子中，我在运行测试时在规范文件中遇到了这个问题。
我必须把ngIf改成[hidden]
<app-loading *ngIf="isLoading"></app-loading>
to
<app-loading [hidden]="!isLoading"></app-loading>
其他回答
此错误表明应用程序中存在真正的问题，因此抛出异常是有意义的。
在devMode中，更改检测在每次常规的更改检测运行之后增加一个额外的回合，以检查模型是否已更改。
如果模型在常规变化检测轮和附加变化检测轮之间发生了变化，则这表明也发生了变化
变更检测本身导致了变更 每次调用方法或getter都会返回不同的值
这两个都不好，因为不清楚如何继续，因为模型可能永远不会稳定。
如果Angular一直运行变更检测直到模型稳定，那么它可能会一直运行下去。 如果Angular不运行变更检测，那么视图可能不会反映模型的当前状态。
参见Angular2中生产模式和开发模式的区别是什么?
一旦我理解了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() {
}
它解决了这个问题:)
参考文章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)，请确保你正在调试你认为你在调试的属性——通过将它设置为一个模糊的颜色值。
以下是我对正在发生的事情的看法。我还没有阅读文档，但我确信这是错误显示的部分原因。
*ngIf="isProcessing()"
当使用*ngIf时，它会在每次条件改变时通过添加或删除元素来物理地改变DOM。因此，如果条件在呈现给视图之前发生了变化(这在Angular的世界中是极有可能的)，就会抛出错误。请参阅开发和生产模式之间的解释。
[hidden]="isProcessing()"
当使用[hidden]时，它不会在物理上改变DOM，而只是从视图中隐藏元素，很可能在后面使用CSS。元素仍然在DOM中，但不可见，这取决于条件的值。这就是为什么使用[hidden]时不会出现错误的原因。
