ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。上一个值：'undefined'

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

组件和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，我也遇到了同样的错误。只需添加一个角度ngcl​​ass属性

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

</div>

我的数据绑定和一切工作正常。我是否需要对父组件执行任何操作？我已经尝试了子组件中的所有生命周期事件

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

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

• 您需要了解的有关该ExpressionChangedAfterItHasBeenCheckedError错误的所有信息
• 您需要了解的有关Angular中变更检测的所有信息

考虑一下为什么需要更改ngAfterViewInit生命周期挂钩中的属性。之前被触发任何其他生命周期ngAfterViewInit/Checked会工作，例如ngOnInit或ngDoCheck或ngAfterContentChecked。

因此，要修复它移动renderWidgetInsideWidgetContainer到ngOnInit()生命周期挂钩。

你要告诉angular您更新的内容后，ngAfterContentChecked 您可以导入ChangeDetectorRef从@angular/core和呼叫detectChanges

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

constructor( private cdref: ChangeDetectorRef ) {}


ngAfterContentChecked() {

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

 }

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

唯一的出路，我发现是改变*ngIf以display:none功能

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

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

两种解决方案：

1. 确保有一些绑定变量，然后将代码移到settimeout（{}，0）;中。
2. 将相关代码移至ngAfterViewInit方法

* NgIf会在这里造成问题，因此使用display none CSS或更简单的方法是使用[hidden] =“！condition”

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

我将代码包装在setTimeout中，并且有效

我遇到麻烦了。

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

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

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

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

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

我在尝试执行与您相同的操作时遇到了相同的问题，并使用类似于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之外，我的矿山与其他矿山几乎相同，因为我有多个宿主元素。

试试这个，在ngOnInit（）中调用您的代码

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

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