在我们的例子中，我们通过在组件中添加changeDetection来FIXED，并调用ngAfterContentChecked中的detectChanges()，代码如下所示

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

你可以使用µsetTimeout()在javascript事件循环的下一个宏任务队列中运行属性的设置。 但是在这种情况下，使用detectChanges()就足够了。出现这种错误的原因有很多:

本文解释了产生此错误的所有原因以及此错误的所有解决方案:https://blog.simplified.courses/angular-expression-changed-after-it-has-been-checked-error/

尽管已经有很多答案，并且有一篇关于变更检测的很好的文章的链接，但我还是想在这里发表我的意见。我认为检查是有原因的，所以我考虑了我的应用程序的架构，并意识到视图中的变化可以通过使用行为主体和正确的生命周期钩子来处理。这就是我的解。

I use a third-party component (fullcalendar), but I also use Angular Material, so although I made a new plugin for styling, getting the look and feel was a bit awkward because customization of the calendar header is not possible without forking the repo and rolling your own. So I ended up getting the underlying JavaScript class, and need to initialize my own calendar header for the component. That requires the ViewChild to be rendered befor my parent is rendered, which is not the way Angular works. This is why I wrapped the value I need for my template in a BehaviourSubject<View>(null): calendarView$ = new BehaviorSubject<View>(null);

接下来，当我可以确定视图被检查时，我用@ViewChild中的值更新该主题:

  ngAfterViewInit(): void {
    // ViewChild is available here, so get the JS API
    this.calendarApi = this.calendar.getApi();
  }

  ngAfterViewChecked(): void {
    // The view has been checked and I know that the View object from
    // fullcalendar is available, so emit it.
    this.calendarView$.next(this.calendarApi.view);
  }

然后，在我的模板中，我只使用异步管道。没有黑客与变更检测，没有错误，工作顺利。

如果你需要更多细节，请尽管问。

博士TL;

ngAfterViewInit() {
    setTimeout(() => {
        this.dateNow = new Date();
    });
}

虽然这是一种变通方法，但有时真的很难以更好的方式解决这个问题，所以如果您使用这种方法，请不要责怪自己。没关系。

示例:初始问题[链接]，用setTimeout()解决[链接]

如何避免

一般来说，这个错误通常发生在你添加ngAfterViewInit之后(甚至在父/子组件中)。第一个问题是问你自己，我能没有ngAfterViewInit吗?也许你把代码移到某个地方(ngAfterViewChecked可能是另一种选择)。

例如:[链接]

也

ngAfterViewInit中影响DOM的async也可能导致这个。也可以通过setTimeout或在管道中添加delay(0)操作符来解决:

ngAfterViewInit() {
  this.foo$
    .pipe(delay(0)) //"delay" here is an alternative to setTimeout()
    .subscribe();
}

例如:[链接]

好的阅读

关于如何调试以及为什么会发生这种情况的好文章:链接

我认为你能想到的最好和最干净的解决方案是:

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

用Angular 5.2.9测试过

将代码从ngAfterViewInit移到ngAfterContentInit。

视图在内容之后被初始化，因此ngAfterViewInit()在ngAfterContentInit()之后被调用