请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
更新
我强烈建议首先从OP的自我响应开始:适当地考虑在构造函数中可以做什么，而在ngOnChanges()中应该做什么。
原始
这与其说是一个答案，不如说是一个题外话，但它可能会帮助到一些人。当我试图让按钮的存在取决于表单的状态时，我偶然发现了这个问题:
<button *ngIf="form.pristine">Yo</button>
据我所知，这种语法会导致根据条件从DOM中添加和删除按钮。这又会导致ExpressionChangedAfterItHasBeenCheckedError。
在我的案例中，解决方案(尽管我没有声称掌握了差异的全部含义)是使用display: none来代替:
<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>
其他回答
在我的情况下，我在LoadingService中有一个行为主题是loading的异步属性
使用[hidden]模型可以工作，但是*ngIf失败
<h1 [hidden]="!(loaderService.isLoading | async)">
THIS WORKS FINE
(Loading Data)
</h1>
<h1 *ngIf="!(loaderService.isLoading | async)">
THIS THROWS ERROR
(Loading Data)
</h1>
解决方案…服务和rxjs…事件发射器和属性绑定都使用rxjs..你最好自己实现它，更多的控制，更容易调试。记住，事件发射器使用rxjs。简单地说，创建一个服务，并在一个可观察对象中，让每个组件订阅该观察对象，并根据需要传递新值或消耗值
此错误表明应用程序中存在真正的问题，因此抛出异常是有意义的。
在devMode中，更改检测在每次常规的更改检测运行之后增加一个额外的回合，以检查模型是否已更改。
如果模型在常规变化检测轮和附加变化检测轮之间发生了变化，则这表明也发生了变化
变更检测本身导致了变更 每次调用方法或getter都会返回不同的值
这两个都不好，因为不清楚如何继续，因为模型可能永远不会稳定。
如果Angular一直运行变更检测直到模型稳定，那么它可能会一直运行下去。 如果Angular不运行变更检测，那么视图可能不会反映模型的当前状态。
参见Angular2中生产模式和开发模式的区别是什么?
@HostBinding可能是这个错误的一个令人困惑的来源。
例如，假设您在组件中有以下主机绑定
// image-carousel.component.ts
@HostBinding('style.background')
style_groupBG: string;
为了简单起见，我们假设这个属性是通过以下输入属性更新的:
@Input('carouselConfig')
public set carouselConfig(carouselConfig: string)
{
this.style_groupBG = carouselConfig.bgColor;
}
在父组件中，你通过编程方式在ngAfterViewInit中设置它
@ViewChild(ImageCarousel) carousel: ImageCarousel;
ngAfterViewInit()
{
this.carousel.carouselConfig = { bgColor: 'red' };
}
事情是这样的:
Your parent component is created The ImageCarousel component is created, and assigned to carousel (via ViewChild) We can't access carousel until ngAfterViewInit() (it will be null) We assign the configuration, which sets style_groupBG = 'red' This in turn sets background: red on the host ImageCarousel component This component is 'owned' by your parent component, so when it checks for changes it finds a change on carousel.style.background and isn't clever enough to know that this isn't a problem so it throws the exception.
一种解决方案是在ImageCarousel内部引入另一个包装器div，并在其上设置背景颜色，但这样就无法获得使用HostBinding的一些好处(例如允许父类控制对象的完整边界)。
在父组件中，更好的解决方案是在设置配置之后添加detectChanges()。
ngAfterViewInit()
{
this.carousel.carouselConfig = { ... };
this.cdr.detectChanges();
}
这看起来很明显，和其他答案很相似，但有细微的区别。
考虑这样一种情况，您直到开发的后期才添加@HostBinding。突然你得到这个错误，它似乎没有任何意义。
请遵循以下步骤:
1. 通过从@angular/core导入'ChangeDetectorRef'来使用它，如下所示:
import{ ChangeDetectorRef } from '@angular/core';
2. 在constructor()中实现，如下所示:
constructor( private cdRef : ChangeDetectorRef ) {}
3. 添加下面的方法到你的函数，你正在调用的事件，如点击按钮。它看起来是这样的:
functionName() {
yourCode;
//add this line to get rid of the error
this.cdRef.detectChanges();
}
