关于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. 解决方案: 异步更新 ...
- 初入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 ...
随机推荐
- 【总结】富有表现力的JavaScript
1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能, ...
- uva12546. LCM Pair Sum
uva12546. LCM Pair Sum One of your friends desperately needs your help. He is working with a secret ...
- IntelliJ Idea 集成svn 和使用
最近公司的很多同事开始使用svn,便尝试了一下,虽然快捷键与eclipse 有些不同,但是强大的搜索功能与"漂亮的界面"(个人认为没有eclipse好看 ),还是值得我们去使用的. ...
- 常见排序算法基于JS的实现
一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...
- Append加载动态轮播
前几天遇到了些小麻烦,不过很快就解决了.之所以要记下来是因为作为一名前端的程序员,要理解页面的加载顺序是最重要的.要不然自己写程序意外的出现bug~~ 刚开始写利用Append的时候,利用火狐的fir ...
- vs vsvim viemu vax 备忘
使用gt和gT往返标签 gd:到达光标所在处函数或者变量的定义处. *:读取光标处的字符串,并且移动光标到它再次出现的地方. #:和上面的类似,但是是往反方向寻找. /text:从当前光标处开始搜索字 ...
- Objective-C 中的 BOOL
之前开发了一个针对单个数据模型,自动建表.增删改查等操作的 ORM 库,后边在 iPhone 5c 上使用时,出现了 crash 的情况. 该项目在 Github 开源,项目地址为SXJDatabas ...
- 架构之高可用性(HA)集群(Keepalived)
Keepalived简介 Keepalived是Linux下一个轻量级别的高可用解决方案.高可用(High Avalilability,HA),其实两种不同的含义:广义来讲,是指整个系统的高可用行,狭 ...
- Python自动化之clean方法前端调用clean方法的错误
obj.non_field_errors.0 源代码: NON_FIELD_ERRORS = '__all__' 如果在前端写 obj.errors.__all__.0直接就会报错 所以经过尝试得知, ...
- 用js实现图片连播和联级菜单的实现
<!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> div{ b ...