ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

解决方案：

异步更新（建议使用）
强制进行变更检测，但是会触发子组件的变更检测，再次导致父组件属性改变

Parent.Component.ts

@Component({selector:"app-parent"
})export class ParentComponent implements OnInit,AfterViewInit {public text = "给子组件的信息";constructor(private cdr: ChangeDetectorRef){}ngOnInit(){}// 该方法缺点： 子组件多的情况下，不易控制。不建议使用
    ngAfterViewInit(){this.cdr.detectChanges();}
}

Child.Component.ts

@Component({selector:"app-child"
})export class ChildComponent implements OnInit, AfterViewInit {@Input text;constructor(private parentComponent: ParentComponent){}ngOnInit(){}ngAfterViewInit() {// 异步更新两种方式// 第一种setTimeout( ()=>{this.parentComponent.text="update message"},2000);// 第二种Promise.resolve(null).then( ()=> {this.parentComponent.text="update message"});}
}

参考原文：https://blog.csdn.net/friend_ship/article/details/81773057

转载于:https://www.cnblogs.com/wjw1014/p/11313167.html

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.相关推荐

ExpressionChangedAfterItHasBeenCheckedError - Expression has changed after it was checked
Expression has changed after it was checked 参考链接一个能够完美重现该问题的例子: export class BankAccount implements ...
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checke
使用轮播图组件小圆点处报错解决方法: //引入依赖 import { ChangeDetectionStrategy } from '@angular/core';@Component({//新增 ...
初入angular4——实际项目搭建总结
前言接到一个pc端后台项目,还会加入两个安卓同事一起学习和做这个项目,需要带一下他们. 既ng1之后,我就没怎么有过其它后台框架的实际项目经验了,期间用的移动端框架也并非vue.angular系列. ...
4 5区别 angular 和_Angular 常见问题解答
--------------------Image from tanaka_tatsuya on Instagram----------------------------- ng6, TypeErr ...
【Angular 基础入门】——知识点整合
文章目录快速入门一.Angular 环境搭建二.基本概念模块简介组件简介服务与依赖注入路由三.基础教程使用路由自定义组件常用结构型指令事件绑定模板引用模板表达式中的运算符 ...
【angular-实践】数据监听并渲染到界面上
背景为了做一个面包屑的样式思路三个界面: 根页面: index(展示面包屑) 资金页面: fund(展示收入.支出,属于同一个页面) 步骤: 在index服务中存BehaviorSubject类 ...
Angular之Error: ExpressionChangedAfterItHasBeenChecked
前些天,再写红包支付功能的时候, Expression has changed after it was checked.很头秃呀,上图. Angular的核心是组件化,组件嵌套会形成一棵组件树.因此 ...
ng6 常见错误汇总(持续更新)
Expression has changed after it was checked. Previous value 产生这个错误的原因很复杂,三言两语说不清.这个错误只会在dev模式出现,在pro ...
MVC 自定义分面控件
using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; using System.Tex ...

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

解决方案：

Parent.Component.ts

Child.Component.ts

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.相关推荐

最新文章

热门文章