angular - 关闭前一个后，一个一个地打开几个mat-dialogs

Question

在我的代码中，我有一个按钮，可以浏览数据列表并为每个数据打开一个 mat-dialog。

不幸的是，在循环过程中，所有 mat-dialogs 打开。

我希望发生的是，通过使用 dialogRef.afterClosed() 方法，根据结果 (true) 下一个 mat-dialog 打开或 (false) 循环结束。

openDialog(): void {
  this.data.forEach(data => {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      disableClose: true
    });
    dialogRef.componentInstance.data = data;

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // open next mat-dialog
      } else {
        // stop loop
      }
    });
  });
}

<div mat-dialog-actions>
  <button mat-button (click)="_dialogRef.close(true)">Ok</button>
  <button mat-button (click)="_dialogRef.close(false)">Cancel</button>
</div>

StackBlitz Here

我该怎么做？我不知道该怎么做。

感谢您的帮助。

Answer 1

你可以通过 rxjs takeWhile 实现这一点

from(this.data)
      .pipe(
        concatMap(x => {
          const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
            disableClose: true
          });

          dialogRef.componentInstance.data = x;

          return dialogRef.afterClosed();
        }),
        takeWhile(Boolean)
      ).subscribe();

参见 https://stackblitz.com/edit/open-mat-dialogs-one-by-one-after-the-previous-one-is-cl-yqprmt?file=src/app/dialog-overview-example.ts