[解決済み] ExpressionChangedAfterItHasBeenCheckedErrorの説明

質問

なぜこのようなエラーが発生し続けるのか、説明してください。 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

明らかに、私は開発モードでのみこの問題が発生し、本番ビルドでは発生しません。しかし、これは非常に迷惑で、開発環境でエラーが発生し、本番では表示されないことの利点が単に理解できません - おそらく私の理解不足のためでしょう。

通常、修正はとても簡単で、エラーの原因となるコードをこのようにsetTimeoutで囲むだけです。

setTimeout(()=> {
    this.isLoading = true;
}, 0);

あるいは、次のようなコンストラクタで強制的に変更を検出します。 constructor(private cd: ChangeDetectorRef) {} :

this.isLoading = true;
this.cd.detectChanges();

しかし、なぜいつもこのエラーに遭遇するのでしょうか？それを理解して、今後このようなハッキング的な修正を避けることができるようにしたいです。

解決方法は？

を理解すると、多くのことがわかるようになりました。 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() {

}

で、問題が解決しました :)