如何调试“表达式检查后已更改”错误？

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();