当使用Angular Material的表格来展示数据时,可以使用一个数据源来控制表格的内容。下面是一个解决Angular Material表格数据源问题的示例代码:
import { MatTableDataSource } from '@angular/material/table';
export class MyDataSource extends MatTableDataSource {
// 构造函数中可以传递初始数据
constructor(initialData: any[]) {
super(initialData);
}
// 自定义方法来更新数据源的内容
updateData(newData: any[]) {
this.data = newData;
}
}
import { Component } from '@angular/core';
import { MyDataSource } from './my-data-source';
@Component({
selector: 'app-my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.css']
})
export class MyTableComponent {
// 创建一个数据源对象
dataSource: MyDataSource;
constructor() {
// 初始化数据源
const initialData = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' },
{ id: 3, name: 'Bob Johnson' }
];
this.dataSource = new MyDataSource(initialData);
}
// 更新数据源的内容
updateDataSource() {
const newData = [
{ id: 4, name: 'Alice Brown' },
{ id: 5, name: 'Charlie Davis' }
];
this.dataSource.updateData(newData);
}
}
dataSource
对象绑定到表格的[dataSource]
属性上。
ID
{{row.id}}
Name
{{row.name}}
displayedColumns
数组来指定要显示的列。export class MyTableComponent {
displayedColumns: string[] = ['id', 'name'];
// ...
}
通过这种方式,可以使用自定义的数据源来控制Angular Material表格的内容,并在需要的时候更新数据源的内容。