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

我已经阅读了几个答案，并且尝试了很多，但是似乎无法解决这个问题。在我的angular 6应用程序中，我尝试打开MatDialog，但收到此错误:



当我调试应用程序并单击checkout按钮时，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模板(单击“ checkout ”按钮时的对话框):

<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()内部最近打开的对话框有什么问题？

最佳答案

使用对话框在settimeout内部关闭。

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