Angular:Expression has changed after it was checked

Angular:Expression has changed after it was checked

angular报类似检查值的错误,严格来说,它不属于错误,而是一种警告,并且是仅在开发模式上会存在的一种警告

这和angular生命周期检查机制有关,当你变更值是在Angular更新DOM之前触发生命周期挂钩,例如ngOnit() 就不会发生此错误,ngAfterViewInit是在Angular更新DOM之后才触发的生命周期挂钩;

如果某个方法或getter每次被调用返回一个不同的值或者是或者子组件在改变了其父组件上上的值,则可能会发生这种情况。某个值发生改变时,他的当前值与初始值不一样的时候,angular 的变更检查机制会检查到他,并且发出一个警告,Angular抛出错误以确保数据始终正确地反映在视图中,这可以防止UI行为不稳定或可能的无限循环。
例如

public load: boolean = false;
ngAfterViewInit(){
	this.load = true
}

或者 子组件里面改变了父组件的值

this.text = 'a';
<children [text]="text"></children>

在children.component.ts
ngAfterViewInit(){
	this.parent.text = ‘b’;
}

等情况。。。
一般在 ngAfterViewInit、ngOnchanges等通常会发生此错误,
解决办法如下:

  1. 使用异步操作
    setTimeout();
    Promise().resolve().then();此类方法不适用于不固定的值返回,类似值为Math.random();
  2. 强制变更检查机制
export class AppComponent {
    name = 'I am A component';
    text = 'A message for the child component';

    constructor(private cd: ChangeDetectorRef) {
    }

    ngAfterViewInit() {
        this.cd.detectChanges();
    }
}

可以参考以下文献
angular 官网介绍(NG0100:检查后表达式已更改)
关于此错误的详细解答

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值