要创建一个包装mat-table的自定义表格组件,你需要按照以下步骤进行操作:
创建一个新的Angular组件,可以命名为CustomTableComponent。
在CustomTableComponent的HTML模板中,添加mat-table元素并定义所需的列。
Column 1
{{element.column1}}
Column 2
{{element.column2}}
import { Component, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-custom-table',
templateUrl: './custom-table.component.html',
styleUrls: ['./custom-table.component.css']
})
export class CustomTableComponent {
@Input() data: any[]; // 作为输入属性传入的数据
displayedColumns: string[] = ['column1', 'column2']; // 列名
dataSource: MatTableDataSource; // 数据源
constructor() {
this.dataSource = new MatTableDataSource();
}
ngOnChanges() {
if (this.data) {
this.dataSource.data = this.data;
}
}
}
// parent.component.ts
export class ParentComponent {
tableData: any[] = [
{ column1: 'Value 1', column2: 'Value 2' },
{ column1: 'Value 3', column2: 'Value 4' },
// 更多数据...
];
}
这样,你就创建了一个包装mat-table的自定义表格组件CustomTableComponent,并且可以在父组件中传入数据来展示表格。