关闭前一个后,一个一个地打开几个mat-dialogs
Open several mat-dialogs one by one after the previous one is closed
在我的代码中,我有一个按钮可以浏览数据列表并为每个数据打开 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>
我该怎么做?我不知道怎么办。
感谢您的帮助。
您可以通过将您的方法标记为 async
并等待您的对话框 afterClosed()
调用来实现此目的,但是由于 await
仅适用于承诺,您需要将 Observable
到 Promise
.
这是适合我的解决方案
@Component({
selector: "dialog-overview-example",
templateUrl: "dialog-overview-example.html",
styleUrls: ["dialog-overview-example.css"]
})
export class DialogOverviewExample {
data: any[] = DATA;
constructor(public dialog: MatDialog) {}
async openDialog() {
for(var i =0; i < this.data.length; i++) {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
disableClose: true
});
dialogRef.componentInstance.data = this.data[i];
var result = await dialogRef.afterClosed().toPromise();
if (!result) {
console.log("Stop loop", result);
break;
}
// else continue the loop
}
}
}
我建议不要使用迭代器 (foreach)(事实上,我不鼓励使用一个),而是在订阅中再次触发 openDialog
如果还有更多数据要显示 (queue-like 方法)。当然,这需要从列表中删除显示的数据,但同时也允许将新数据附加到它。
你可以通过 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();
在我的代码中,我有一个按钮可以浏览数据列表并为每个数据打开 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>
我该怎么做?我不知道怎么办。
感谢您的帮助。
您可以通过将您的方法标记为 async
并等待您的对话框 afterClosed()
调用来实现此目的,但是由于 await
仅适用于承诺,您需要将 Observable
到 Promise
.
这是适合我的解决方案
@Component({
selector: "dialog-overview-example",
templateUrl: "dialog-overview-example.html",
styleUrls: ["dialog-overview-example.css"]
})
export class DialogOverviewExample {
data: any[] = DATA;
constructor(public dialog: MatDialog) {}
async openDialog() {
for(var i =0; i < this.data.length; i++) {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
disableClose: true
});
dialogRef.componentInstance.data = this.data[i];
var result = await dialogRef.afterClosed().toPromise();
if (!result) {
console.log("Stop loop", result);
break;
}
// else continue the loop
}
}
}
我建议不要使用迭代器 (foreach)(事实上,我不鼓励使用一个),而是在订阅中再次触发 openDialog
如果还有更多数据要显示 (queue-like 方法)。当然,这需要从列表中删除显示的数据,但同时也允许将新数据附加到它。
你可以通过 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();