请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
当我添加*ngIf时，我的问题很明显，但这不是原因。该错误是由于在{{}}标签中更改模型，然后稍后尝试在*ngIf语句中显示更改后的模型而导致的。这里有一个例子:
<div>{{changeMyModelValue()}}</div> <!--don't do this! or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>
为了解决这个问题，我将调用changeMyModelValue()的位置更改为更有意义的位置。
在我的情况下，我希望每当子组件更改数据时调用changeMyModelValue()。这要求我在子组件中创建并发出一个事件，以便父组件可以处理它(通过调用changeMyModelValue())。看到https://angular.io/guide/component-interaction parent-listens-for-child-event
其他回答
Angular会运行更改检测，当它发现传递给子组件的某些值被更改时，Angular会抛出以下错误:
点击查看更多信息
为了纠正这个问题，我们可以使用AfterContentChecked生命周期钩子和
import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';
constructor(
private cdref: ChangeDetectorRef) { }
ngAfterContentChecked() {
this.cdref.detectChanges();
}
此错误表明应用程序中存在真正的问题，因此抛出异常是有意义的。
在devMode中，更改检测在每次常规的更改检测运行之后增加一个额外的回合，以检查模型是否已更改。
如果模型在常规变化检测轮和附加变化检测轮之间发生了变化，则这表明也发生了变化
变更检测本身导致了变更 每次调用方法或getter都会返回不同的值
这两个都不好，因为不清楚如何继续，因为模型可能永远不会稳定。
如果Angular一直运行变更检测直到模型稳定，那么它可能会一直运行下去。 如果Angular不运行变更检测，那么视图可能不会反映模型的当前状态。
参见Angular2中生产模式和开发模式的区别是什么?
尝试了上面建议的大部分解决方案。只有在这种情况下对我有用。我使用*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生命周期钩子必然会引起性能问题，因为你的应用程序会越来越大，因为它会被多次触发。
我使用的是ng2-carouselamos (Angular 8和Bootstrap 4)
下面这些步骤解决了我的问题:
实现AfterViewChecked 添加构造函数(私有changeDetector: ChangeDetectorRef) {} 然后ngAfterViewChecked(){this.changeDetector.detectChanges();｝
以下是我对正在发生的事情的看法。我还没有阅读文档，但我确信这是错误显示的部分原因。
*ngIf="isProcessing()"
当使用*ngIf时，它会在每次条件改变时通过添加或删除元素来物理地改变DOM。因此，如果条件在呈现给视图之前发生了变化(这在Angular的世界中是极有可能的)，就会抛出错误。请参阅开发和生产模式之间的解释。
[hidden]="isProcessing()"
当使用[hidden]时，它不会在物理上改变DOM，而只是从视图中隐藏元素，很可能在后面使用CSS。元素仍然在DOM中，但不可见，这取决于条件的值。这就是为什么使用[hidden]时不会出现错误的原因。
