ng4：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改答案

【问题标题】：ng4: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checkedng4：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改
【发布时间】：2018-10-23 21:40:33
【问题描述】：

我正在使用角度材料步进器，功能按预期工作并出现以下错误：

Live Demo:

【问题讨论】：

将初始化 FormGroups 从 ngOnInit 移动到构造函数，错误应该消失 stackblitz.com/edit/angular-pqfnya?file=app/…
你可以在这里得到@yurzui评论的解释blog.angularindepth.com/…

标签： angular angular5 angular2-template angular-material-stepper

【解决方案1】：

当您在 ngAfterInit 方法的开头更改值时，有时需要延迟。

    setTimeout(() => {
          //Code Here
      x=Object //new value
        }, 0);
    setTimeout(() => {
          //Code Here
        });

这对我有用

【讨论】：

【解决方案2】：

通常避免ExpressionChangedAfterItHasBeenCheckedError 的另一种方法是在组件中使用ChangeDetectionStrategy.OnPush：

@Component({
    selector: 'my-component',
    templateUrl: '/path/to/my-component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}

使用 Push ChangeDetectionStrategy 的组件仅在显示的数据发生更改时才重新渲染 DOM，而不是在每个 Angular 更改检测周期重新渲染。因此，这节省了客户端的大量资源。

您可能需要考虑通过@Input() 传递的对象引用不会触发此组件的更改检测的“缺点”，因此最终需要使用ChangeDetectorRef 手动触发它，但最终这种方法将导致更清洁的组件属性/数据流管理。

【讨论】：