Question

我将Angular Material与Angular 6一起使用，就像在ngOnInit上一样，如果条件正确，我必须显示内容。

我有用于显示对话框的对话框模块

  `if (!this.checkforRestriction()) {
  this.loadContent(this.ReferenceID);
} else {
  this.dialogService.okmessage('', dialogMessage);
}`

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ id：未定义”。当前值：“ id：mat-dialog-0”。似乎已在对其父级和子级进行脏检查后创建了该视图。它是在变更检测挂钩中创建的吗？在viewDebugError（core.js：8445）

我收到此错误。请提示出什么问题了吗？

Answer 1

如果不知道所有调用函数的详细信息，就很难说出是什么原因引起的。但是，通过执行以下操作很可能可以修复ExpressionChangedAfterItHaHasBeenCheckedError：

尝试将代码移到ngAfterViewInit生命周期挂钩中，
尝试将代码包装在setTimeout中。

最后，阅读Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error。它应该使您对所面临的错误有一个更好的了解。

Answer 2

我遇到了相同的基本问题，但出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改经过检查后。先前值：“ aria-labelledby：null”。当前值：“ aria-labelledby：mat-dialog-title-0”。”

我的对话框包含以下指令标题：

<h1 mat-dialog-title>{{ model.title }}</h1>

Angular尝试将aria-labelledby属性应用于对话框组件（mat-dialog-container）的父容器。如果要通过http加载在回调中打开对话框，则无法执行此操作。

对于我来说，我是作为RxJS'管道'的一部分打开对话框，并在http get有效执行'setTimeout'之后添加delay(0)。

例如

const result = this.http.get(...).pipe(
                                       delay(0), 
                                       switchMap(response => {

   if (response.hasOverdueLibraryBook) {

       return this.dialogManager.openOverdueLibraryBookDialog();  // this is a mat-dialog
   }
   else 
   {
      return of(false);
   }

});

角组件Expression中的Mat对话框错误ChangedAfterItHaHasBeenCheckedError

2 个答案: