ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义'

Question

我知道堆栈溢出中已经发布了很多相同的问题，并尝试了不同的解决方案来避免运行时错误，但没有一个对我有用。

组件和 Html 代码

export class TestComponent implements OnInit, AfterContentChecked {
    @Input() DataContext: any;
    @Input() Position: any;
    sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null };
    constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) {
    }

    ngOnInit() {

    }
    ngAfterContentChecked() {

            debugger;
            this.sampleViewModel.DataContext = this.DataContext;
            this.sampleViewModel.Position = this.Position;

    }


<div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows">
     //some other html here
</div>

请注意：此组件是使用 DynamicComponentLoader 动态加载的

在解决问题后，我发现了几个问题

首先，这个子组件是通过使用 DynamicComponentResolver 动态加载并传递如下输入值

 ngAfterViewInit() {
    this.renderWidgetInsideWidgetContainer();

  }


  renderWidgetInsideWidgetContainer() {
    let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
    let viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    debugger;
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;

  }

即使我像下面这样更改了我的子组件 html，我也会遇到同样的错误。只需添加一个角度 ngclass 属性

<div class="container-fluid ds-iconwidget-wrapper text-center" [ngClass]="Sample">

</div>

我的数据绑定和一切工作正常。我需要对父组件做任何事情吗？ 我已经尝试过子组件中的所有生命周期事件

Answer 1

RxJS 定时器()

像其他人建议的那样，您可以通过将代码放在 setTimeout(..) 函数中来解决问题。它本质上会将执行移到事件循环堆栈之外，从而进入 Angular 的下一个变更检测周期。

RxJS 的 own timeout implementation 称为 timer() - 它接受毫秒作为参数并返回一个 observable。由于我们只需要在事件循环堆栈清理干净（并且 Angular 已完成所有渲染计算）之后执行，我们可以使用 timer() 不带任何参数（无论如何默认为 0）：

ngAfterViewInit() {
    timer().subscribe(() => {
        // your code here
    })
}

JS 事件循环架构：

Answer 2

*NgIf 在这里会产生问题，所以要么使用 display none CSS，要么更简单的方法是使用 [hidden]="!condition"

Answer 3

这段代码解决了我的问题。

import {ChangeDetectorRef } from '@angular/core';

constructor( private cdref: ChangeDetectorRef ) {}

ngAfterContentChecked() {
  this.cdref.detectChanges();
}

Answer 4

我遇到了麻烦。

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。 'mat-checkbox-checked' 的先前值：'true'。当前值：'false'。

这里的问题是直到下一个更改检测周期运行时才检测到更新的值。

最简单的解决方案是添加变更检测策略。 将这些行添加到您的代码中：

import { ChangeDetectionStrategy } from "@angular/core";  // import

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "abc",
  templateUrl: "./abc.html",
  styleUrls: ["./abc.css"],
})

Answer 5

试试这个，在 ngOnInit()

中调用你的代码

someMethod() // emitted method call from output
{
    // Your code 
}

ngOnInit(){
  someMethod(); // call here your error will be gone
}

Answer 6

 ngAfterViewInit() {
   setTimeout(() => {
     this.renderWidgetInsideWidgetContainer();
   }, 0);
  }

这是解决这个问题的好方法。

Answer 7

setTimeout(() => { // your code here }, 0);

我将我的代码封装在 setTimeout 中并且它起作用了

Answer 8

两种解决方案：

1. 确保您有一些绑定变量，然后将该代码移至 settimeout( { }, 0);
2. 将相关代码移至 ngAfterViewInit 方法

Answer 9

如果您将<ng-content> 与*ngIf 一起使用，您一定会陷入此循环。

我发现的唯一出路是将*ngIf 更改为display:none 功能

Answer 10

我在尝试做和你一样的事情时遇到了同样的问题，我用类似于 Richie Fredicson 的答案解决了这个问题。

当您运行 createComponent() 时，它会使用未定义的输入变量创建。 然后，当您将数据分配给这些输入变量时，它会改变事物并在您的子模板中导致该错误（在我的情况下，这是因为我在 ngIf 中使用了输入，一旦我分配了输入数据，它就会改变）。

在这种特定情况下，我能找到避免它的唯一方法是在分配数据后强制进行更改检测，但是我没有在 ngAfterContentChecked() 中这样做。

您的示例代码有点难以理解，但如果我的解决方案适合您，它会是这样的（在父组件中）：

export class ParentComponent implements AfterViewInit {
  // I'm assuming you have a WidgetDirective.
  @ViewChild(WidgetDirective) widgetHost: WidgetDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private changeDetector: ChangeDetectorRef
  ) {}

  ngAfterViewInit() {
    renderWidgetInsideWidgetContainer();
  }

  renderWidgetInsideWidgetContainer() {
    let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    let viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    debugger;
    // This <IDataBind> type you are using here needs to be changed to be the component
    // type you used for the call to resolveComponentFactory() above (if it isn't already).
    // It tells it that this component instance if of that type and then it knows
    // that WidgetDataContext and WidgetPosition are @Inputs for it.
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;
    this.changeDetector.detectChanges();
  }
}

除了我使用@ViewChildren 而不是@ViewChild 因为我有多个宿主元素之外，我的几乎相同。

Answer 11

你必须告诉angular你在ngAfterContentChecked之后更新了内容 您可以从@angular/core 导入ChangeDetectorRef 并调用detectChanges

import {ChangeDetectorRef } from '@angular/core';

constructor( private cdref: ChangeDetectorRef ) {}


ngAfterContentChecked() {

this.sampleViewModel.DataContext = this.DataContext;
this.sampleViewModel.Position = this.Position;
this.cdref.detectChanges();

 }

Answer 12

当子组件/指令的绑定更新已经完成时，会触发ngAfterContentChecked 生命周期挂钩。但是您正在更新用作ngClass 指令的绑定输入的属性。那就是问题所在。当 Angular 运行验证阶段时，它会检测到属性有待更新并抛出错误。

要更好地理解错误，请阅读以下两篇文章：

• Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
• Everything you need to know about change detection in Angular

想想为什么需要更改ngAfterViewInit 生命周期挂钩中的属性。在ngAfterViewInit/Checked 之前触发的任何其他生命周期都将起作用，例如ngOnInit 或ngDoCheck 或ngAfterContentChecked。

所以要修复它，请将 renderWidgetInsideWidgetContainer 移动到 ngOnInit() 生命周期挂钩。