时间戳

首页 > 解决方案 > 动态添加元素中的元素引用导致 ExpressionChangedAfterItHasBeenCheckedError：

javascript - 动态添加元素中的元素引用导致 ExpressionChangedAfterItHasBeenCheckedError：

问题描述

我的模板中有一个参考。此元素是动态呈现的（条件无关紧要）：

<div #menu *ngIf="condition">
...
</div>

我在组件中使用它：

  @ViewChild('menu')
  public set content(content: ElementRef) {
    if (content) {
      this.menuElement = content;
    }
  }

我还有另一个元素： <my-component [ngStyle]="setStyles()">

我在组件的 setStyles 方法中使用了我的元素引用：

  public setStyles(): {} {
    if (this.menuElement) {
      const menuHeight = this.menuElement.nativeElement.offsetHeight;
      const styles = { // some styles };
      return styles;
    }
  }

问题是我的测试引发了一个错误：错误：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it is checked。以前的值：'未定义'。当前值：'[object Object]'。任何人都可以帮助我吗？提前致谢

标签： javascriptangular

解决方案

很难帮助您不共享所有相关代码，但一个潜在的原因（可能是最常见的原因）ExpressionChangedAfterItHasBeenCheckedError可能是，例如，您正在更新AfterViewInit生命周期挂钩中的条件值。这是因为AfterViewInit在更改检测运行后触发。

如果是这种情况，您可以在OnInit生命周期挂钩中移动您的条件逻辑。如果问题仍然存在，我建议将更改检测设置为OnPush ( changeDetection: ChangeDetectionStrategy.OnPush)。

推荐阅读