关于ExpressionChangedAfterItHasBeenCheckedError
最近在stackoverflow上似乎每天都有一些关于angular报错‘ExpressionChangedAfterItHasBeenCheckedError’的问题。发生这些问题通常是由于angular的开发者不懂angular变更检测的工作原理,以及为什么这个检测的报错是有必要的。很多开发者甚至认为这是angular的bug。但其实不是的。这是一个用于防止模型数据和ui之间数组不一致的一个警告机制,以便不让用户在页面上看到陈旧的或者错误的数据。
@Component({
selector: 'a-comp',
template: `
{{name}}
`
})
export class AComponent {
name = 'I am A component';
text = 'A message for the child component`;
view.oldValues[0] = 'A message for the child component';
view.oldValues[1] = 'I am A component';
AComponentView.instance.text === view.oldValues[0]; // false
'A message for the child component' === 'updated text'; // false
AComponentView.instance.name === view.oldValues[1]; // false
'I am A component' === 'updated name'; // false
export class BComponent {
@Input() text;
constructor(private parent: AppComponent) {}
ngOnInit() {
this.parent.text = 'updated text';
}
}
export class BComponent {
@Input() text;
constructor(private parent: AppComponent) {}
ngAfterViewInit() {
this.parent.name = 'updated name';
}
}
不禁思考,它是在变化检测勾子中创建的吗?
通常,修复方案即通过正确的变更检测机制来创建动态组件。例如上面章节中的最后一个例子,可以将动态组件的创建过程移到ngOnInit生命周期勾子中,尽管文档说明ViewChild只能在ngAfterViewInit之后使用,但是在创建视图的时候,它归属于子组件,因此可以更早使用。
export class BComponent {
name = 'I am B component';
@Input() text;
constructor(private parent: AppComponent) {}
ngOnInit() {
setTimeout(() => {
this.parent.text = 'updated text';
});
}
ngAfterViewInit() {
setTimeout(() => {
this.parent.name = 'updated name';
});
}
}
如果你在使用EventEmitter,你可以传递true参数选项来设置异步机制
export class AppComponent {
name = 'I am A component';
text = 'A message for the child component';
constructor(private cd: ChangeDetectorRef) {
}
ngAfterViewInit() {
this.cd.detectChanges();
}
}
译自:Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error
关于ExpressionChangedAfterItHasBeenCheckedError的更多相关文章
- ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 解决方案: 异步更新 ...
- ExpressionChangedAfterItHasBeenCheckedError详细解释
一个angular组件,他的生命周期是这样的 update bound properties for all child components/directives call ngOnInit, On ...
- 初入angular4——实际项目搭建总结
前言 接到一个pc端后台项目,还会加入两个安卓同事一起学习和做这个项目,需要带一下他们. 既ng1之后,我就没怎么有过其它后台框架的实际项目经验了,期间用的移动端框架也并非vue.angular系列. ...
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- cuowu
ngFor不能用于Object rowspan colspan不能绑定变量,要用attr.colspan https://stackoverflow.com/questions/35615751/wh ...
- Angular-cli 构建应用的一些配置
Angular-cli 构建应用 的一些配置 标签(空格分隔): Angular 直接使用 ng build --prod --build-optimizer --base-href=/ 来发布 ba ...
- Angular2的双向数据绑定
什么是双向绑定 如图: 双向绑定.jpg 双向绑定机制维护了页面(View)与数据(Data)的一致性.如今,MVVM已经是前段流行框架必不可少的一部分. Angular2中的双向绑定 双向绑定, ...
- Angular变更检测策略报错
报错信息: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was ...
随机推荐
- 嵌入式常用技术概览之IIC(I2C)
一.先决知识 (1)模电基础知识(用以理解IIC如何通信) 二.IIC概览 I2C是80年代飞利浦(Philips->NXP->高通)研 ...
- day12 十二、开放封闭、装饰器
一.nonlocal关键词 # global # num = # def fn(): # global num # L>G 将局部的名字与全局统一 # num = # fn() # print( ...
- caffe中的卷积
https://www.zhihu.com/question/28385679 如上,将三维的操作转换到二维上面去做,然后调用GEMM库进行矩阵间的运算得到最后结果. 两个矩阵相乘,需要中间的那个维度 ...
- 执行git add .命令时报warning: LF will be replaced by CRLF in yarn.lock.
解决办法是执行:git config --global core.autocrlf false 是符号 / 转义的问题
- FPGA总结——杂谈
数字设计 一.关于组合逻辑 竞争冒险:一个逻辑门的多个输入信号同时跳变(路径时延不同,使得状态改变的时刻有先有后).这种现象叫做竞争,引起的结果称为冒险. 消除毛刺(冒险):(1)增加冗余项:(2 ...
- WebDriver与文件系统
1.屏幕截屏操作:其接口函数是TakesScreenshot.该功能是在运行测试用例的过程中,需要验证某个元素的状态或者显示的数值时,可以将屏幕截取下来进行对比:或者在异常或者错误发生的时候将屏幕截取 ...
- Spark mllib多层分类感知器在情感分析中的实际应用
import org.apache.spark.ml.Pipeline import org.apache.spark.ml.classification.MultilayerPerceptronCl ...
- [LeetCode] 236. Lowest Common Ancestor of a Binary Tree_ Medium tag: DFS, Divide and conquer
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- 15.IEnumerable和IEnumerator
先说IEnumerable,我们每天用的foreach你真的懂它吗? 阅读目录 自己实现迭代器 yield的使用 怎样高性能的随机取IEnumerable中的值 我们先思考几个问题: 为什么在fore ...
- JavaScript 常用数组函数方法专题
1. 由字符串生成数组 split() 分割字符串,并将分割的部分作为一个元素保存在一个新建的数组中. var str1 = "this is an emample to using the ...