Angular 4 错误：检查后表达式已更改

Posted 2023-02-22

【中文标题】Angular 4 错误：检查后表达式已更改

【英文标题】：Angular 4 Error: Expression has changed after it was checked

【发布时间】：2018-05-11 20:15:59

【问题描述】：

我在我的 Angular 4 应用程序中使用 Angular Material。当我尝试在ngAfterViewInit() 中使用MatSnackBar 时，我遇到以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改 检查后。以前的值：'未定义'。当前值： 'visible-bottom'。似乎视图是在其父级及其子级经过脏检查后创建的。它是在变更检测钩子中创建的吗？

我已经使用ChangeDetectorRef 来检测更改，但它似乎不起作用。

这是我一直在处理的代码：

   constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef)  

   ngOnInit() 

   ngAfterViewInit() 
    let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', 
      duration: 10000
    );

    snackBarRef.onAction().subscribe(() => 
      console.log("Cancelled");
    );


    this.cdr.detectChanges();
  

请帮我解决这个问题。

【问题讨论】：

您是否尝试在onAction().subscribe(() => ); 内移动this.cdr.detectChanges();

@AmitChigadani 这行不通！

尝试创建一个工作的 plunker 来复制错误。提供的代码不会有太大帮助。

【参考方案1】：

尝试在你的构造函数中移动snackbar：

constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) 
  let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', 
    duration: 10000
  );
  snackBarRef.onAction().subscribe(() => 
    console.log("Cancelled");
  );

【参考方案2】：

一个潜在但粗略的解决方案是使用 setTimeout -

let snackBarRef;
setTimeout(() => 
    snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', 
      duration: 10000
    );
);

请参考https://github.com/angular/material2/issues/6158了解更多信息。

【讨论】：

我已经这样做了。它有效，但我正在寻找检测这些变化的 Angular 方法。

@ProtonStarlight，我试图找出不感兴趣的方法，我发现了 2 种可能的方法，如下所示 - 1. 要使用 ngAfterContentInit 而不是 ngAfterViewInit，请参考 - angular.io/guide/… 2. To在DetectChanges方法之前/结合使用ChangeDetectorRef的分离方法。请注意，我没有亲自使用过这些，但我认为这些可能会有所帮助。

@ProtonStarlight，你有机会查看我的评论吗？

但是AfterContentInit 初始化一个甚至不存在视图的可视元素还为时过早。