请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
我也遇到过类似的问题。查看生命周期钩子文档，我将ngAfterViewInit更改为ngAfterContentInit，它工作正常。
其他回答
我用rxjs解决了这个问题
import { startWith, tap, delay } from 'rxjs/operators';
// Data field used to populate on the html
dataSource: any;
....
ngAfterViewInit() {
this.yourAsyncData.
.pipe(
startWith(null),
delay(0),
tap((res) => this.dataSource = res)
).subscribe();
}
更新
我强烈建议首先从OP的自我响应开始:适当地考虑在构造函数中可以做什么，而在ngOnChanges()中应该做什么。
原始
这与其说是一个答案，不如说是一个题外话，但它可能会帮助到一些人。当我试图让按钮的存在取决于表单的状态时，我偶然发现了这个问题:
<button *ngIf="form.pristine">Yo</button>
据我所知，这种语法会导致根据条件从DOM中添加和删除按钮。这又会导致ExpressionChangedAfterItHasBeenCheckedError。
在我的案例中，解决方案(尽管我没有声称掌握了差异的全部含义)是使用display: none来代替:
<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>
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/
当值在同一个更改检测周期中更改多次时，将发生此错误。我在一个TypeScript getter中遇到了这个问题，它的返回值经常变化。要解决这个问题，您可以限制一个值，使其在每个更改检测周期中只能更改一次，如下所示:
import { v4 as uuid } from 'uuid'
private changeDetectionUuid: string
private prevChangeDetectionUuid: string
private value: Date
get frequentlyChangingValue(): any {
if (this.changeDetectionUuid !== this.prevChangeDetectionUuid) {
this.prevChangeDetectionUuid = this.changeDetectionUuid
this.value = new Date()
}
return this.value
}
ngAfterContentChecked() {
this.changeDetectionUuid = uuid()
}
HTML:
<div>{{ frequentlyChangingValue }}</div>
这里的基本方法是每个变更检测周期都有自己的uuid。当uuid改变时，您就知道您已经进入了下一个循环。如果循环已经改变，则更新值并返回它，否则只需返回与之前在此循环中返回的值相同的值。
这确保每个循环只返回一个值。这对于频繁更新值很有效，因为更改检测周期发生得非常频繁。
为了生成uuid，我使用了uuid npm模块，但你可以使用任何方法来生成唯一的随机uuid。
我在Ionic3(它使用Angular 4作为其技术堆栈的一部分)中遇到过这种错误。
对我来说，它是这样的:
< ion-icon[名字]= " getFavIconName ()" > < / ion-icon >
所以我试着有条件地改变离子图标的类型，从大头针到删除圈，根据屏幕运行的模式。
我猜我将不得不添加一个*ngIf代替。
