angular - 检查后表达式已更改 - MatDialog Angular 6

Question

我已经阅读了几个答案，并且尝试了很多，但我似乎无法让它发挥作用。在我的 Angular 6 应用程序中，我尝试打开一个 MatDialog 但我收到此错误:

ERROR Error:
ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked. Previous value: '@slideDialog: enter'. Current value: '@slideDialog: exit'.

当我调试应用程序并单击结帐按钮时，MatDialog 将打开，然后再执行几行后它会关闭。在没有断点的情况下运行应用程序时，您根本看不到打开的对话框。

这是模板文件:

<div>
  <button id="cancelButton" mat-raised-button (click)="clearCart()">Cancel</button>
  <button id="checkoutButton" mat-raised-button color="primary" (click)="openCheckoutDialog(dataSource)" [disabled]="isTableEmpty()">Checkout</button>
</div>

当我点击 ID 为“checkoutButton”的按钮时，它会调用 openCheckoutDialog()

这是我的类，其中调用了 openCheckoutDialog:

import { Component, OnInit, ChangeDetectorRef  } from '@angular/core';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent implements OnInit {

  dataSource: MatTableDataSource<Item>;
  itemList: Item[] = [];

  constructor(public dialog: MatDialog, private cdr: ChangeDetectorRef) { }

  openCheckoutDialog(): void {
    const dialogRef = this.dialog.open(ReviewItemListComponent, {
      width: '250px',
      data: this.itemList
    });
    // this.cdr.detectChanges();

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
    // this.cdr.detectChanges();
  }
}

我已经在上面的两个地方尝试了 this.cdr.detectChanges()，但我仍然会收到错误。

这是我的 ReviewItemListComponent 模板(单击结帐按钮时的对话框):

<div>
  <h1 mat-dialog-title>
    Are you sure?
  </h1>

  <mat-dialog-actions>
    <button tabindex="-1" mat-raised-button [mat-dialog-close]="true">Cancel</button>
    <button tabindex="-1" mat-raised-button color="primary" (click)="confirm()">Confirm</button>
  </mat-dialog-actions>
</div>

这里是 ReviewItemListComponent 类:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Item } from '../item';

@Component({
  selector: 'app-review-item-list',
  templateUrl: './review-item-list.component.html',
  styleUrls: ['./review-item-list.component.css']
})
export class ReviewItemListComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<ReviewItemListComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Item[]) { }

  ngOnInit() {
    this.dialogRef.close();
  }

  confirm(): void {
    this.dialogRef.close();
  }

}

我没有对数据进行任何更改，这是大多数问题和答案所涉及的内容，那么我该如何解决有关打开 MatDialog 的问题？

编辑:

原来我将 this.dialogRef.close() 粘贴到了错误的方法中。在这种情况下，我在创建我的 review-item-list-component.ts 文件时将它放在 ngOnInit() 中。所以一旦我打开它我就关闭它。这仍然不能解释错误。在 ngOnInit() 中关闭最近打开的对话框有什么问题？

Answer 1

在 settimeout 内使用对话框关闭。

setTimeout(() => {    
    this.dialogRef.close();
}, 0);