ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

今天在code时遇到ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 类型报错,其实各站也有详细解释及解决方案,我在此写写自己简单的理解及解决方案用做笔记

出现此报错的原因个人总结为一句话:在angular变更检测之后更改了某些值,angular为了防止模型数据与ui视图数据不一致产生的

以本人此次报错为例
我在此处添加了一个表单并且使用表单的验证是否通过控制“确定”按钮的禁用与否
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked_第1张图片
status的初始化状态为false,当此表单无任何验证或编辑时(表单打开时便调用statusChange将stutus更改为true),由于此时视图已经渲染,而状态在变更检测完又改变了,自然就报错了
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked_第2张图片
以下两个方案都是亲测可用

解决方案1. 异步属性更新

变更检测和验证摘要是同步执行的,这意味着如果我们异步更新属性,当验证循环正在运行中时,属性值不会变化更新,应用也就不会抛出错误了
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked_第3张图片
解决方案2. 强制更新检测

ChangeDetectorRef是angular内置用来操作其变更检测的,detectChanges方法的作用是强制增加一个变更检测周期,将此方法放在在你更改属性后的地方
在这里插入图片描述
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked_第4张图片
希望可以帮到遇到相同问题的小伙伴

参考文章及详解: https://www.cnblogs.com/xudengwei/p/9214959.html

你可能感兴趣的:(angular学习笔记)