在Angular中,我们可以使用MAT-Table来显示矩阵或动态表格。下面是一个示例,展示如何在Angular中使用MAT-Table来显示动态表格。
HTML代码:
{{column}}
{{element[column]}}
在Typescript中,数据源由一个包含对象的数组组成,每个对象代表一个表格行。在下面的示例中,dataSource和columns是组件中的成员变量:
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = [];
dataSource = new MatTableDataSource();
ngOnInit() {
this.displayedColumns = ['id', 'name', 'email'];
this.dataSource = new MatTableDataSource(ELEMENT_DATA);
}
}
const ELEMENT_DATA: any[] = [
{ id: 1, name: 'John Doe', email: 'john.doe@someemail.com' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@someemail.com' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@someemail.com' },
// ...
];
上面的示例中,我们将dataSource属性设置为具有表格数据的MatTableDataSource对象。我们使用 displayedColumns 属性定义列的名称,以便在HTML模板中使用它们。
最后,在ngOnInit函数中,我们为其提供组件的初始化,将数据源和表格列设置为具有相应值的MatTableDataSource对象。