Question

在我的matDialog函数中关闭Angular Material的ngDoCheck()时出现问题。

说明：

在我的主页上，有一个按钮可以打开matDialog，以提取或不提取数据到 Excel 文件中。在我的matDialog中，我有两个按钮。一个关闭matDialog，另一个启动功能extractWallet()，恢复数据库中的数据。

在此功能中，我使用waitExtraction变量禁用按钮，并禁用matDialog的关闭，直到提取完成。

我的loadInvoiceExtractionXXX()方法允许我恢复数据库数据，一旦接收到数据，在与该功能对应的索引（0、1或2）上将completedExtraction设置为[false, false, false]的情况下设置为true。

在我的ngOnInit()中，数据是通过Observer接收的，并保存在本地变量中。因此，在执行loadInvoiceExtractionXXX()中的extractWallet()之后，将接收到新数据。

我的问题发生在这里。我有一个ngDoCheck()函数，用于检查何时使用this.completedExtraction=[true, true, true]接收到所有三个数据。我的 Excel 文件已很好地创建并上传到浏览器。提取操作现已完成，我现在要用matDialog关闭this.dialogRef.close()。

但显示以下错误：

错误： ExpressionChangedAfterItHaHasBeenCheckedError ：   检查后表达式已更改。

上一个值：“ @ dialogContainer：输入”。   当前值：“ @ dialogContainer：退出”。

我试图关闭matDialog中的ngAfterViewChecked()，但显示相同的错误。如果有人能提供解决方案让我在提取后关闭我的matDialog，我会很感兴趣。

我将代码供您使用：

export class ExtractWalletComponent implements OnInit, DoCheck, OnDestroy {

  private subscription$: Subscription = new Subscription();

  selectedWallet: Wallet;
  waitExtraction: boolean;
  completedExtraction: boolean[];

  invoiceProduct: InvoiceExtractionProduct[];
  invoiceSupport: InvoiceExtractionSupport[];
  invoiceTraining: InvoiceExtractionTraining[];

  constructor(public dialogRef: MatDialogRef<ExtractWalletComponent>,
              public storeWallets: WalletsComponentStore,
              public snackBar: MatSnackBar) { }

  ngOnInit(): void {
    this.waitExtraction = false;
    this.completedExtraction = [false, false, false];

    this.subscription$.add(this.storeWallets.selectedWallet$.subscribe(wallet => this.selectedWallet = wallet));
    this.subscription$.add(this.storeWallets.invoiceExtractionProduct$.subscribe(invoiceProduct => this.invoiceProduct = invoiceProduct));
    this.subscription$.add(this.storeWallets.invoiceExtractionSupport$.subscribe(invoiceSupport => this.invoiceSupport = invoiceSupport));
    this.subscription$.add(this.storeWallets.invoiceExtractionTraining$.subscribe(invoiceTraining => this.invoiceTraining = invoiceTraining));
  }

  ngDoCheck(): void {
    if(this.completedExtraction[0] == true && this.completedExtraction[1] == true && this.completedExtraction[2] == true) {
      this.completedExtraction[0] = false;
      this.completedExtraction[1] = false;
      this.completedExtraction[2] = false;
      this.dialogRef.disableClose = false;

      const wb: XLSX.WorkBook = XLSX.utils.book_new();
      const ws1: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.invoiceProduct);
      const ws2: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.invoiceSupport);
      const ws3: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.invoiceTraining);

      XLSX.writeFile(wb, this.selectedWallet.user.num_seller + '_' + this.selectedWallet.period.month +
                          '_' + this.selectedWallet.period.year + '_' + this.selectedWallet.id + '.xlsx');

      this.dialogRef.close(); //<-- ERROR
    }
  }

  ngOnDestroy(): void {
    this.subscription$.unsubscribe();
    this.storeWallets.clearExtraction();
  }

  extractWallet(): void {
    this.waitExtraction = true;
    this.dialogRef.disableClose = true;
    this.snackBar.open('Extraction en cours', 'OK', { duration: 5000 });

    this.storeWallets.loadInvoiceExtractionProduct(this.selectedWallet).subscribe(
      res => {
        if(res) { this.completedExtraction[0] = true;}
      },
      err => { console.error(err); this.dialogRef.close(); this.snackBar.open('Echec de l\'extraction', 'OK', { duration: 2000 }); }
    );

    this.storeWallets.loadInvoiceExtractionSupport(this.selectedWallet).subscribe(
      res => {
        if(res) { this.completedExtraction[1] = true; }
      },
      err => { console.error(err); this.dialogRef.close(); this.snackBar.open('Echec de l\'extraction', 'OK', { duration: 2000 }); }
    );

    this.storeWallets.loadInvoiceExtractionTraining(this.selectedWallet).subscribe(
      res => {
        if(res) { this.completedExtraction[2] = true; }
      },
      err => { console.error(err); this.dialogRef.close(); this.snackBar.open('Echec de l\'extraction', 'OK', { duration: 2000 }); }
    );
  }
}

预先感谢您的帮助。

PS：对不起，我的英语（谷歌翻译）。

Answer 1

好吧，问题正是它告诉您的内容：您正在更改检测周期内进行更改。您需要将更改置于周期之外，例如：

ngDoCheck(): void {
   if(this.completedExtraction[0] == true && this.completedExtraction[1] == true && this.completedExtraction[2] == true) {
      // omitted

      // Run after change detection
      setTimeout(() => this.dialogRef.close());

   }
}

但是我认为主要的问题是您正在使用ngDoCheck生命周期挂钩。您为什么不对可观察对象做出反应？

combineLatest([
   this.storeWallets.loadInvoiceExtractionProduct(this.selectedWallet)
      .pipe(/* Add your catchError logic for only this observable */),
   this.storeWallets.loadInvoiceExtractionSupport(this.selectedWallet),
   this.storeWallets.loadInvoiceExtractionTraining(this.selectedWallet),
]).pipe(
   filter(results => results.every(res => !!res))
).subscribe(results => {
   // Called when all 3 returned positively
})

在我的函数ngDoCheck（）Angular中关闭matDialog时出现问题

1 个答案: