Angular 组件 ExpressionChangedAfterItHasBeenCheckedError 中的 Mat 对话框错误-angular-IT问答社区-解决你的IT疑问

Angular 组件 ExpressionChangedAfterItHasBeenCheckedError 中的 Mat 对话框错误

Jordy Dieltjens 1月前

我正在使用带有 Angular 6 的 Angular Material，它就像在 ngOnInit 上一样，如果条件正确，我必须显示内容。我有对话框模块，我正在使用它显示对话框if (!this.

我正在使用 Angular Material 和 Angular 6， ngOnInit 如果条件正确，我就必须显示内容。

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

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

我收到了这个错误。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'id: undefined'. Current value: 'id: mat-dialog-0'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
    at viewDebugError (core.js:8445)

请指出哪里出了问题？

帖子版权声明 1、本帖标题：Angular 组件 ExpressionChangedAfterItHasBeenCheckedError 中的 Mat 对话框错误
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Jordy Dieltjens在本站《angular》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

PlsWork 1月前 0 只看Ta

引用 2楼
如果不知道所有调用函数的详细信息，很难判断问题的原因。不过，ExpressionChangedAfterItHasBeenCheckedError 最有可能通过执行以下操作来修复：
- 尝试将代码移到 ngAfterViewInit 生命周期钩子中，
- 尝试将代码包装在 setTimeout 内。
最后，阅读 Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 。它应该可以让您更好地了解所面临的错误。
Subhendu Mondal 1月前 0 只看Ta

引用 3楼

补充答案：我将代码移至构造函数，它也能正常工作。您必须小心，不要在构造函数中执行太多操作。
arnino 1月前 0 只看Ta

引用 4楼
我遇到了同样的潜在问题，错误如下：

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“管道”的一部分打开，并 delay(0) 在 http get 之后添加“setTimeout”。

例如。
```
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);
   }

});
```