"チェックした後に式が変更されました"というエラーをデバッグする方法？

Question

これは悪名高いエラーです。これは開発者の間でかなりの「フォロー」がありますが、デバッグするのは非常に難しいことも知られています。このようなログは、このようなログ

PersonalSituationComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. 
at viewDebugError (core.es5.js:8434) [angular] 
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [angular] 
at checkBindingNoChanges (core.es5.js:8576) [angular] 
at checkNoChangesNodeInline (core.es5.js:12455) [angular] 
at checkNoChangesNode (core.es5.js:12429) [angular] 
at debugCheckNoChangesNode (core.es5.js:13209) [angular] 
at debugCheckRenderNodeFn (core.es5.js:13149) [angular] 
at Object.eval [as updateRenderer] (PersonalSituationComponent.html:3) [angular] 
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131) [angular] 
at checkNoChangesView (core.es5.js:12251) [angular] 
at callViewAction (core.es5.js:12618) [angular] 
at execEmbeddedViewsAction (core.es5.js:12596) [angular] 
at checkNoChangesView (core.es5.js:12250) [angular] 
at callViewAction (core.es5.js:12618) [angular] 

本当に役に立たないです。 htmlの3行目に多くの行がある場合、その行にブール値はありませんが、はです。コンポーネントの開始タグは、さまざまな場所（それぞれ.tsおよび.html）にあります。 。

どのようにエラーをデバッグし、すべてのブール値をハードコードされた値に置き換えずに、それぞれを個別にチェックしますか？ （そしてあなたが入力している間、私はそれをするつもりです）。

Answer 1

エラーが解決されるまで、コンポーネント内で発生する可能性のある可変値の変更に対して手動変更検出を実行できます。見つけたら、実装を再設計するか、手動で変更を検出するだけかを決定することができます。

import { ChangeDetectorRef } from '@angular/core'; 

constructor(private _cdRef: ChangeDetectorRef) { } 

this._cdRef.detectChanges(); 

Answer 2

、しかし、良い出発点は、このエラーが何を意味するかを理解するために、これを読んでいる「ExpressionChangedAfterItHasBeenCheckedError」エラーを把握する方法を示す記事がたくさんあります：あなたならば、https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

をしかしは、このエラーを引き起こしている犯人を見つけるために、コメントアウトしてください。原因となった行を特定したら、「この行があるときはこのエラーが発生します」などの特定のエラーで再度ポストすることができます。

あなたがまだあることを行うにはしたくない場合は、あなたが問題のあるコードを見つけたら、することは、その後ちょうどコミュニティは、通常は推奨しています物事のいくつかを試してみてください。

• （これは単にあるのsetTimeoutを使用してコードをラップ
• 子要素が適切にされて破壊されていることを確認し@Miloで別の答えに説明したように）
• 実行変化検出検出をハック

Oの記事がたくさんありますこのエラーが発生した場合は、少し努力してコードをよりよく理解することができれば、より良い結果を得ることができます。

幸運を祈る！ :)

Answer 3

現在のところ、角度は値以外の意味のある詳細を提供しないため、文字通りデバッグする必要があります。

すべてのエラーに対してデバッガオプションブレークを設定すると、スタックを歩き回ることができます（ちょっと分かりますか？）問題が発生したコンポーネント名を確認してください。