要将数据映射到Angular Material表格的表头中,可以使用matHeaderRowDef
指令和*matHeaderCellDef
指令。
以下是一个示例代码,演示如何将数据映射到表头:
mat-table
元素,并使用matHeaderRowDef
指令定义表头行:
Name
{{element.name}}
Age
{{element.age}}
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
export interface UserData {
name: string;
age: number;
}
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['name', 'age'];
dataSource: MatTableDataSource;
constructor() {
// 假设你有一些用户数据
const users: UserData[] = [
{ name: 'John Smith', age: 25 },
{ name: 'Jane Doe', age: 30 },
{ name: 'Bob Johnson', age: 35 }
];
this.dataSource = new MatTableDataSource(users);
}
}
在上面的示例中,我们定义了两个列:“name”和“age”,并将它们的值绑定到数据中的相应属性。然后,通过matHeaderRowDef
指令将这些列定义为表头行的一部分。
最后,我们使用MatTableDataSource
来设置数据源,并将用户数据传递给它。
这样,你就可以在Angular Material表格中将数据映射到表头了。
上一篇:Angular Material:如何选择mat-table中的特定mat-cell?
下一篇:Angular Material:如何在TS中为每个mat-horizontal-stepper stepper图标设置不同的背景颜色