如何找到导致 ExpressionChangedAfterItHasBeenCheckedError 的属性；'ng-valid' 的先前值为 'false'，当前值为 'true'？

Question

我如何解决以下错误... 有人可以帮我进行故障排除吗？

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
    at throwErrorIfNoChangesMode (core.js:6757)
    at bindingUpdated (core.js:12967)
    at checkStylingProperty (core.js:16757)
    at ɵɵclassProp (core.js:16665)
    at NgControlStatusGroup_HostBindings (forms.js:1327)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)

1. 我该如何确定是哪个属性抛出了这个错误？
2. 是响应式表单的.valid属性在造成错误吗？
3. 你使用什么工具来进行故障排除？Chrome DevTools上的堆栈跟踪并没有提供什么有用信息，它仅仅指向各种Angular core.js组件。请参考以下截图： 点击此处查看图片描述
4. 我知道的唯一方法就是删除一些组件，并观察错误何时停止，但这太令人沮丧了。

谢谢！

- user17842237

---

错误指向一个链接，这可能有助于更好地理解错误。 - Siddhant

这个链接并不是很有帮助。在我的情况下，它是用户通过点击请求添加到表单中的ion-input。ng-valid（我只能猜测这指的是表单控件）一开始是true，但一旦ion-input在屏幕上被实现，它似乎会注意到，糟糕，起始值无效，所以ng-valid变为false。 - Harald

我也遇到了这个错误，但我无法找出它来自哪里。它会随机发生。我认为它来自某个库。 - Augusto Barreto

Answer 1

看着你的调用栈，问题似乎在NgControlStatusGroup_HostBindings中。 这里找到答案。 这个6分钟的视频解释了如何找到错误的源头。叙述者接着说，通常问题是由于使用ngAfterViewInit而不是ngOnInit引起的。

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

更新

最终找到问题的根源后，发现在 app.component.ts 中有一个布尔值被 HTML 模板中的一个对象读取，然后紧接着下面的对象调用了一个改变该值的方法。

通过在 Chrome 开发者工具控制台中点击 app.component.html 链接（如上图所示），我直接找到了问题所在。将有问题的对象移到模板的更高位置后，问题得以解决。

- Michael