首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ExpressionChangedAfterItHasBeenCheckedError和上下文错误角度4

ExpressionChangedAfterItHasBeenCheckedError和上下文错误角度4
EN

Stack Overflow用户
提问于 2017-07-19 22:15:07
回答 2查看 1.5K关注 0票数 0

面对此错误,无法从控制台进行调试:

代码语言:javascript
运行
复制
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Main Bike Trails'.
    at viewDebugError (core.es5.js:8418)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396)
    at checkBindingNoChanges (core.es5.js:8560)
    at checkNoChangesNodeInline (core.es5.js:12421)
    at checkNoChangesNode (core.es5.js:12395)
    at debugCheckNoChangesNode (core.es5.js:13172)
    at debugCheckRenderNodeFn (core.es5.js:13112)
    at Object.eval [as updateRenderer] (MapComponent.html:12)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
    at checkNoChangesView (core.es5.js:12217)## 

由以下给定方法生成的错误。它不能很好地工作。

代码语言:javascript
运行
复制
ngAfterViewInit() {
    this._mapService.plotActivity(+this._route.snapshot.params['id']);
    this.activityName = this.activity.name;
    this.activityComments = this.activity.comments;
    this.activityDistance = this.activity.distance;
    this.activityDate = this.activity.date;
    this.gpx = this.activity.gpxData;
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-29 19:13:30

我看到许多angular开发人员都遇到了这个错误,不知道真正的原因是什么,所以让我先花点时间解释这个问题,然后再解释可能的解决方案。

角度变化检测的工作原理

没有一个角度变化检测机制的基本概念是开发人员进入这个问题的主要原因,所以给我几行简短的解释。

我们可以将angular应用程序看作是根组件之后的组件树,它下面有许多子组件,因此当组件中发生变化时,angular将计算从根组件到所有子组件的表达式。

Angular快速计算根组件的所有表达式并更新dom,最后它将保留名为oldValues的对象中的所有变量值,例如,假设根组件中有一个name属性,它的值从john更改为peter,然后一旦angular完成dom更新,它会记住属性name的新值为peter,并开始处理下一个子组件。

这里需要注意的重要一点是,一旦angular完成了单个组件的处理过程,它就不会期望该组件的任何属性在相同的摘要循环内发生变化。

在什么时候会出现此错误

最后,当一个摘要循环完成时,它将运行另一个循环来验证所有组件中的所有值(此循环仅在开发模式下运行),因此此处发生的情况是,angular将查看每个组件的oldValues对象,并验证组件中的现有值是否与oldValues对象中的值相同,但如果不相同,则angular将抛出ExpressionChangedAfterItHasBeenCheckedError

解决方案

一旦特定组件完成了angular的处理,您就不应该尝试更改附加到父组件中dom的属性。如果您仍然需要这样做-尽管不建议这样做,那么让angular完成当前周期,然后通过执行以下操作让angular在下一个周期处理您的更改

代码语言:javascript
运行
复制
setTimeout(()=>{
        /* your code goes here */
});
票数 0
EN

Stack Overflow用户

发布于 2017-07-22 19:48:49

您是否尝试过在ngAfterContentInit()方法中移动您的更改?看看这一页有很好的解释:

https://angular.io/guide/lifecycle-hooks#aftercontent

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45193260

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档