关于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 ...
随机推荐
- 基于 ASP.NET Core 2.1 的 Razor Class Library 实现自定义错误页面的公用类库
注意:文中使用的是 razor pages ,建议使用 razor views ,使用 razor pages 有一个小坑,razor pages 会用到 {page} 路由参数,如果应用中也用到了这 ...
- 阿里云 centos 服务器无法自动挂载 nas 的问题
阿里云服务器 centos 7.3 ,开始是通过 fstab 配置的自动挂载: xxx.cn-hangzhou.nas.aliyuncs.com:/ /nas nfs4 auto 0 0 但服务器启动 ...
- 1.7Oob 方法重载和成员变量,局部变量,构造方法
1:方法调用,如果值有参方法,必须传递实际参数. 2:方法定义了多少个参数,传递的实际参数就 必须有多少个, 方法的作用:1:描述某个类的作用,2:软件的复用 这个复用率低,作用小,价值很低: 3:
- 基于 redis 的分布式锁实现 Distributed locks with Redis debug 排查错误
小结: 1. 锁的实现方式,按照应用的实现架构,可能会有以下几种类型: 如果处理程序是单进程多线程的,在 python下,就可以使用 threading 模块的 Lock 对象来限制对共享变量的同步访 ...
- 集合 & 深浅copy
集合: 特点:集合是可变的数据类型,但他里面的元素必须是不可变的数据类型,无序,不可重复. 创建: set1 = set({1,2,3}) 或者直接创建set2 = {1,2,3} 集合的增删查: 增 ...
- 转载:Linux下解压zip乱码问题的解决(unzip)
https://blog.csdn.net/abyjun/article/details/48344379 在windows上压缩的文件,是以系统默认编码中文来压缩文件.由于zip文件中没有声明其编码 ...
- Centos7+python3.6+face-recognition
Step1 安装Python3.6.xhttps://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set- ...
- 插入排序(Python实现)
目录 1. for版本--插入排序 2. while版本--插入排序 3. 测试用例 4. 算法时间复杂度分析 1. for版本--插入排序 def insert_sort_for(a_list): ...
- python数据结构-如何统计序列中元素的频度
如何统计序列中元素的频度 问题举例 如何找出随机序列[1, 5, 6, 5, 3, 2, 1, 0, 6, 1, 6]中出现频度最高的3个元素? 如何统计某篇英文文章中词频最高的5个单词? 将序列转换 ...
- go语言的安装与开发环境
安装golang编译器: https://studygolang.com/dl 之后设置环境变量GOPATH(项目目录) GOROOT(默认已经设置好) 安装编辑器:IDEA安装和破解 https: ...