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等通常会发生此错误,
解决办法如下:
- 使用异步操作
setTimeout();
Promise().resolve().then();此类方法不适用于不固定的值返回,类似值为Math.random(); - 强制变更检查机制
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:检查后表达式已更改)
关于此错误的详细解答