ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

最新推荐文章于 2024-02-07 09:30:00 发布
最新推荐文章于 2024-02-07 09:30:00 发布
阅读量9.5k 收藏 11
点赞数 8
分类专栏： angular学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallNut/article/details/110954418
版权

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

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

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

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

变更检测和验证摘要是同步执行的，这意味着如果我们异步更新属性，当验证循环正在运行中时，属性值不会变化更新，应用也就不会抛出错误了
在这里插入图片描述
解决方案2. 强制更新检测

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

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

花心小坚果
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
10-21
主要介绍了KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定的相关资料,需要的朋友可以参考下
jQuery中:checked选择器用法实例
12-11
本文实例讲述了jQuery中:checked选择器用法。分享给大家供大家参考。具体分析如下： 此选择器能够选取所有选中的复选框或单选按钮。 语法结构: 代码如下:$(“:checked”) 此选择器可以和其他选择器配合使用，比如[类选择器、元素选择器等等。 代码如下:$(“.myradio:checked”).hide(); 以上代码能够将类名为myradio，并且被选中的复选框或者单选框隐藏。 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <meta name=”author” content=”//
响应式设计的基本原理和实现方法（超级详细）
最新发布
贫僧法号依平
02-07 945
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
深究AngularJS——ng-checked（回写：带真实案例代码）
10-19
本篇文章主要介绍了深究AngularJS——ng-checked（回写：带真实案例代码），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
friend_ship的博客
08-17 4289
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous vlalue:"给子组件的信息".Current value:"update message". 解决方案： 异步更新 强制进行变更检测，但是会触发子组件的变更检测，再次导致父组件属性改变 Par...
一个 ExpressionChangedAfterItHasBeenCheckedError 错误的解决过程
SAP 资深技术专家 Jerry Wang 的技术分享
03-13 942
问题描述 我的 Component 里有一个 selectedPane 字段(第56行)，作为数据源显示在 div 标签里(代码第47行)： 代码第 51 行，我使用 @ViewChild 这个 query，将第 45 行的 div 元素，查询出来并通过 52 行的 set 函数，赋给 this.selectedPane. 运行时收到这条错误消息： ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has change
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked，angular
yaomengzhi的博客
08-20 3017
 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'dateObj: undefined'. Current value: 'dateObj: [object Object]'. 大概意思：在内容改变的时候视...
[译] 关于 `ExpressionChangedAfterItHasBeenCheckedError` 错误你所需要知道的事情
weixin_33909059的博客
03-25 727
原文链接：Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 关于 ExpressionChangedAfterItHasBeenCheckedError，还可以参考这篇文章，并且文中有 youtube 视频讲解：...
angular抛出 ExpressionChangedAfterItHasBeenCheckedError错误分析
南城旧梦_de博客
08-29 1401
当变更检测完成后又更改了表达式值时，Angular 就会抛出错误。Angular 只会在开发模式下抛出此错误。在下，Angular 在每次变更检测运行后都会执行一次附加检查，以确保绑定没有更改。这会在视图处于不一致状态时捕获错误。比如，如果某个方法或 getter 每次被调用时都会返回一个不同的值，或者某个子组件更改了其父组件上的值，就可能会发生这种情况。如果发生这两种情况，则表明变更检测是不稳定的。Angular 会抛出错误以确保数据始终正确地反映在视图中，从而防止 UI 行为不稳定或可能的无限循环。
angular变化检测ExpressionChangedAfterItHasBeenCheckedError
qq_630097928的博客
03-01 333
ExpressionChangedAfterItHasBeenCheckedError
C#难点逐个击破（7）:checked与unchecked
09-05
checked 关键字用于对整型算术运算和转换显式启用溢出检查。
CheckableTextView：简单灵活的Checked TextView或Checkable TextView
02-03
CheckableTextView：简单灵活的Checked TextView或Checkable TextView
AD19 add pins to nets错误_ExpressionChangedAfterItHasBeenCheckedError 的错误须知
weixin_39693295的博客
11-09 675
原文链接：Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error​blog.angularindepth.com译者：秋天​github.com最近 stackoverflow 上几乎每天都有人提到 Angular 抛出的一个错误：ExpressionChangedAfte...
记NG0100: Expression has changed after it was checked错误
weixin_41210946的博客
03-21 610
组件是在加入nz-table后开始报错，初步推断可能是在ngAfterViewInit中createComponent创建组件后，组件又要加载nz-table，初始化nz-table时，框架内部组件的初始值变更为我的组件中的绑定值时导致。检查表格的html和组件ts文件没有明显错误，报错是在加载组件后。方案1：将创建组件的过程改为异步执行，避免在生命周期中创建新的节点，也可以加在ngOnInit中了。报错的admin-manage为一个管理员表格的组件，在添加了nz-table后报错。
Angular 变化检测及解决 Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has change
Kate_sicheng的博客
12-02 2746
最近遇到了一个问题：最终在这里找到了解决方案：https://angular.io/errors/NG0100。
您需要了解有关"ExpressionChangedAfterItHasBeenCheckedError"错误的所有信息
小红帽的博客
12-02 793
最近在stackoverflow上几乎每天都有关于`ExpressionChangedAfterItHasBeenCheckedError`的提问，通常提出这些问题是因为Angular开发人员不了解更改检测的工作原理，以及为什么检查产生这个错误是必须的。许多开发人员甚至将其视为错误。但这当然不是。这是一种警告机制，可防止模型数据与UI之间出现不一致，以免在页面上向用户显示错误或旧数据。
页面渲染正常，但因渲染顺序或生命周期而报错 Expression has changed after it was checked. Previous value: ...(问题解决)
medusa222的博客
08-03 5344
{{currentProjectGroup.name}}--管理员列表页面渲染正常，但仍然报错can not read property ‘name’ of undefined 这是因为当渲染到这的时候，最开始currentProjectGroup为undefined，自然也就没有属性name，就会先报错，后期currentProject为重新赋值时，渲染成功。为解决这个报错，可加一个判断，如下图 <span *ngIf="!currentProjectGroup"> {{curre
Angular：Expression has changed after it was checked
fish_dw的博客
05-24 1819
Angular：Expression has changed after it was checked angular报类似检查值的错误，严格来说，它不属于错误，而是一种警告，并且是仅在开发模式上会存在的一种警告 这和angular生命周期检查机制有关，当你变更值是在Angular更新DOM之前触发生命周期挂钩，例如ngOnit() 就不会发生此错误，ngAfterViewInit是在Angular更新DOM之后才触发的生命周期挂钩； 如果某个方法或getter每次被调用返回一个不同的值或者是或者子组件在改
r: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'. Expression location: AddCustomntiModalComponent component. Find more at
07-08
该错误（ExpressionChangedAfterItHasBeenCheckedError）通常是由于Angular的变更检测机制引起的。它表示在Angular的变更检测周期中，某个表达式的值在被检测后发生了变化。 要解决这个问题，你可以尝试以下几种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值