我得到了这个错误，因为我声明了一个变量 使用ngAfterViewInit改变了它的值

export class SomeComponent {

    header: string;

}

来修复我从

ngAfterViewInit() { 

    // change variable value here...
}

to

ngAfterContentInit() {

    // change variable value here...
}

在更改之后显式地运行更改检测:

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

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

博士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();
}

例如:[链接]

好的阅读

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

正如@leocaseiro在github上提到的那样。

我为那些正在寻找简单解决方案的人找到了3个解决方案。 1)从ngAfterViewInit移动到ngAfterContentInit 2)移动到ngAfterViewChecked结合ChangeDetectorRef as 建议在#14748(评论) 3)继续使用ngOnInit()，但之后调用ChangeDetectorRef.detectChanges() 您的更改。

使用默认表单值可避免此错误。

而不是使用在ngAfterViewInit()中应用detectChanges()的接受答案(这也解决了我的情况下的错误)，我决定为动态所需的表单字段保存一个默认值，这样当表单稍后更新时，如果用户决定更改表单上的选项，将触发新的必需字段(并导致提交按钮被禁用)，它的有效性不会改变。

这在我的组件中节省了一小部分代码，在我的案例中，错误完全避免了。

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

@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测试过