在 Angular 中,可以使用 Angular Material 中的 MatDialog 来创建对话框。要从对话框中返回列表中的值,可以按照以下步骤操作:
listData = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
];
import { MatDialog } from '@angular/material/dialog';
constructor(private dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
data: this.listData
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result:', result);
});
}
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: 'dialog.component.html',
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any[]
) {}
closeDialog(item): void {
this.dialogRef.close(item);
}
}
在对话框组件的 HTML 模板中,可以使用 ngFor 循环显示列表数据,并在点击列表项时调用 closeDialog 方法来关闭对话框并返回所选值:
List
- {{ item.name }}
这样,当打开对话框并选择列表项时,会将所选的值传递回原始组件,并在控制台中打印出结果。