时间戳

首页 > 解决方案 > 检查后表达式已更改-MatDialog Angular 6

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

问题描述

我已经阅读了几个答案，并且尝试了很多，但似乎无法使其正常工作。在我的 Angular 6 应用程序中，我尝试打开 MatDialog 但收到此错误：

ERROR 错误：
ExpressionChangedAfterItHasBeenCheckedError：
表达式在检查后已更改。以前的值：'@slideDialog: enter'。当前值：“@slideDialog：退出”。

当我调试应用程序并单击结帐按钮时，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()到了错误的方法中。ngOnInit()在这种情况下，我在创建 review-item-list-component.ts 文件时将其放入其中。所以一旦我打开它，我就会关闭它。这仍然不能解释错误。关闭最近打开的对话框有什么问题ngOnInit()？

标签： angularangular2-changedetection

解决方案

在 settimeout 内使用对话框关闭。

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

推荐阅读