MatDialog在上一个对话框关闭时打开下一个对话框-用于循环或流

Question

如何从流中打开下一个对话框，仅当上一个对话框关闭时？我的意思是，当我得到流的值时，我不想连续打开所有对话框。

const arraySource = from(res);
arraySource.pipe().subscribe(code => {
console.log('value: ', code);
const description = this.locale.getDescription(code);
const config      = new MatDialogConfig();
config.data = {code: code, description: description.value};
this.validationDialogRef = this.dialog.open(ValidationDialog, config);
this.validationDialogRef.afterClosed().subscribe(data => {
console.log("data returned from mat-dialog-close is ", this.validationDialogRef, data);
});
})

当我使用take(1(运算符时，我只从对话框中的Array中获得第一个元素。，如果没有take(1(，所有对话框都将出现。有一些方法可以在上一个对话框关闭时运行scheluder>

问候

Answer 1

您可以使用concat。一旦上一次观察完成，这将触发下一次可观察：

concat(
...res.map((code) => of(void 0).pipe(
concatMap(() => {
const description = this.locale.getDescription(code);
const config = new MatDialogConfig();
config.data = {code: code, description: description.value};
this.validationDialogRef = this.dialog.open(ValidationDialog, config);
return this.validationDialogRef.afterClosed().pipe(
tap((data) => {
console.log("data from mat-dialog-close:", this.validationDialogRef, data);
})
);
})
))
).susbcribe(() => {
// all dialogs have been processed
});

如果你想使用concatAll，你可以这样做。这基本上是一样的。您也可以将其与defer:一起使用

from(res).pipe(
map((code) => defer(() => {
const description = this.locale.getDescription(code);
const config = new MatDialogConfig();
config.data = {code: code, description: description.value};
this.validationDialogRef = this.dialog.open(ValidationDialog, config);
return this.validationDialogRef.afterClosed().pipe(
tap((data) => {
console.log("data from mat-dialog-close:", this.validationDialogRef, data);
})
);
}),
concatAll()
).subscribe(() => {
// all dialogs have been processed
});