如何实现流中前一个MatDialog关闭后再打开下一个对话框？

The key to fixing this is using RxJS's concatMap operator—it ensures each dialog opens only after the previous one has closed, processing items in strict sequence. Here's the adjusted code:

const arraySource = from(res);
arraySource.pipe(
  concatMap(code => {
    console.log('value: ', code);
    const description = this.locale.getDescription(code);
    const config = new MatDialogConfig();
    config.data = { code: code, description: description.value };
    
    // Open dialog and return its afterClosed() observable
    const dialogRef = this.dialog.open(ValidationDialog, config);
    return dialogRef.afterClosed();
  })
).subscribe(data => {
  console.log("data returned from mat-dialog-close is ", data);
  // Handle individual dialog results here if needed
});

Why This Works: #

• concatMap: This operator processes each item from your source array in order. It waits for the inner observable (returned by dialogRef.afterClosed()) to complete before moving to the next item.
• afterClosed(): The MatDialogRef.afterClosed() observable emits exactly once when the dialog closes, then completes. This signals concatMap that it's safe to open the next dialog in the sequence.

Key Notes: #

• If you need to handle errors for individual dialogs (e.g., if opening a dialog fails), add a catchError inside the concatMap to prevent the entire sequence from stopping.
• The dialog order will match the order of items in your res array, as concatMap preserves the source sequence order.

This fixes both issues from your original code: no more "all dialogs at once" popups, and you get to process every item in the array sequentially.

内容的提问来源于stack exchange，提问作者Uland Nimblehoof