我们可以通过传递数据到对话框组件来解决此问题。在table.component.ts文件中创建一个名为openDialog()的函数,其中包含一个MatDialog实例,并将选定的行数据传递给对话框组件。
import { Component, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['id', 'name', 'age', 'address'];
dataSource = [
{id: 1, name: 'John', age: 30, address: 'New York'},
{id: 2, name: 'Mary', age: 25, address: 'London'},
{id: 3, name: 'Jane', age: 40, address: 'Paris'},
];
constructor(public dialog: MatDialog) {}
openDialog(row): void {
const dialogRef = this.dialog.open(DialogComponent, {
data: row
});
}
}
在对话框组件中,我们可以通过通过data属性来获取传递的数据。
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html'
})
export class DialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
最后,我们可以在对话框模板中使用“数据”对象中的属性来显示数据。
{{data.name}}
Age: {{data.age}}
Address: {{data.address}}
这样,我们就可以在Mat-Dialog中正确地显示表格数据了。