如何查找哪个属性抛出 ExpressionChangedAfterItHasBeenCheckedError；“ng-valid”的先前值：“false”。当前值：“真”

Question

我该如何解决以下错误...有人可以帮我解决它吗？

\n

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for \'ng-valid\': \'false\'. Current value: \'true\'.. Find more at https://angular.io/errors/NG0100\n    at throwErrorIfNoChangesMode (core.js:6757)\n    at bindingUpdated (core.js:12967)\n    at checkStylingProperty (core.js:16757)\n    at \xc9\xb5\xc9\xb5classProp (core.js:16665)\n    at NgControlStatusGroup_HostBindings (forms.js:1327)\n    at processHostBindingOpCodes (core.js:9213)\n    at refreshView (core.js:9491)\n    at refreshComponent (core.js:10616)\n    at refreshChildComponents (core.js:9242)\n    at refreshView (core.js:9495)\n

\n

\n
1. 我如何找出哪个属性抛出了这个？
\n
2. 这是执行此操作的反应形式的 .valid 属性吗？
\n
3. 您使用什么工具来排除故障？chrome devTools 上的堆栈跟踪非常没有帮助，它只是指向各种 Angular core.js 组件。查看打印输出：\n在此处输入图像描述
\n
4. 我知道的唯一方法是删除各种组件并查看错误何时停止，但这非常令人沮丧。
\n

\n

谢谢你！

\n

Answer 1

查看您的调用堆栈，它看起来像 中的问题列表NgControlStatusGroup_HostBindings。

在这里找到了答案。6 分钟多的视频解释了如何查找错误根源。解说员接着说，这个问题通常是由于使用 ngAfterViewInit 而不是 ngOnInit 引起的。

这一更改对我有用，并导致了其他问题，但至少它提供了缩小问题范围并解决问题的能力。

更新

最终深入了解后，HTML 模板中的对象正在读取 app.component.ts 中的一个布尔值，然后紧接其下方的对象调用了一个更改该值的方法。

通过单击 chrome 开发工具控制台中的 app.component.html 链接（上图中圈出的部分），我就找到了问题所在。通过将有问题的对象移至模板中的更高位置来解决此问题。