我通过从angular core中添加ChangeDetectionStrategy来解决这个问题。

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

关于ExpressionChangedAfterItHasBeenCheckedError错误的一切你需要知道的文章详细解释了这种行为。

你设置的问题是ngAfterViewInit生命周期钩子是在变更检测处理DOM更新后执行的。你在这个钩子中有效地改变了模板中使用的属性，这意味着DOM需要重新渲染:

  ngAfterViewInit() {
    this.message = 'all done loading :)'; // needs to be rendered the DOM
  }

这将需要另一个变更检测周期，而Angular在设计上只运行一个摘要周期。

你基本上有两种解决方法:

使用setTimeout, Promise异步更新属性。然后在模板中引用异步可观察对象 在DOM更新之前执行钩子中的属性更新- ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked。

在使用数据表时，我得到了类似的错误。当你在另一个*ngFor数据表中使用*ngFor时，会在它拦截角度变化周期时抛出这个错误。因此，不要在数据表内部使用数据表，而是使用一个常规的表或替换mf。带有数组名的数据。这很好。

我认为最简单的解决方法如下:

Make one implementation of assigning a value to some variable i.e. via function or setter. Create a class variable (static working: boolean) in the class where this function exists and every time you call the function, simply make it true whichever you like. Within the function, if the value of working is true, then simply return right away without doing anything. else, perform the task you want. Make sure to change this variable to false once the task is completed i.e. at the end of the line of codes or within the subscribe method when you are done assigning values!

在我的例子中，它发生在p-radioButton上。问题是，我使用的名称属性(这是不需要的)旁边的formControlName属性，就像这样:

<p-radioButton formControlName="isApplicant" name="isapplicant" value="T" label="Yes"></p-radioButton>
<p-radioButton formControlName="isApplicant" name="isapplicant" value="T" label="No"></p-radioButton>

我还将初始值“T”绑定到is申请人窗体控件，如下所示:

isApplicant: ["T"]

我通过删除单选按钮中的name属性来解决这个问题。 此外，因为2个单选按钮具有相同的值(T)，这在我的情况下是错误的，简单地将其中一个值更改为另一个值(例如F)也解决了这个问题。

不错的答案。然而，在我看来，当我使用: ChangeDetectorRef和AfterViewInit， Angular会进入一些额外的渲染周期，如果我的HTML代码设计得不是很小心，或者需要在TS代码中调用几个依赖于刷新的函数，我就会得到额外的视图渲染调用，因此会有额外的处理。

这里有一个我喜欢使用的解决方案，因为我不需要担心任何这些，它在编程上非常简单，并且不需要我或系统太多额外的东西。每当Angular给我带来“Expression has changed after it was checked”这种臭名昭著的错误时，我使用它都没有问题。

我有这个小的public/exported函数，它只是通过一个零延迟承诺传递我的值。这样做的目的是迫使JavaScript/JS进入另一个后台周期，从而将值更新分离到下一个处理周期，并-防止错误。(请注意，JS的周期与Angular HTML的视图呈现周期不同，处理强度更低)。

export async function delayValue(v: any, timeOutMs: number = 0): Promise<any> {
    return new Promise((resolve) => {
        setTimeout(() => {
          resolve(v);
        }, timeOutMs);
      });
}

现在，当我需要防止错误时，我简单地做:

this.myClassValue = await delayValue(newValue);

这只是一行代码。由于timeOutMs = 0的值，实际上没有明显的延迟。

下面是一个典型的场景:

myObservable$.subscribe(newValue  = {
    ...                // WHEN NEW VALUE ARRIVES FROM NOTIFIER(S)
    this.handleSubscribedValues(newValue);
    ...
});
                      // THIS MAY GIVE YOU THE ERROR !
private handleSubscribedValues(newValue) {
    this.myClassValue = newValue;
}
                      // SO, USE THIS INSTEAD TO AVOID THE ERROR
private async handleSubscribedValues(newValue) {
    this.myClassValue = await delayValue(newValue);
}

你也可以使用delayValue()函数和一些延迟/超时值，如果你需要等待一些事情发生，例如给用户几秒钟。

希望这对你们中的一些人有用。