- 确保安装并导入 Angular Material 模块:
import {MatTableDataSource} from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
- 在组件中定义数据源、排序和分页变量:
data: any[];
dataSource: MatTableDataSource;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
- 在组件初始化时,将数据源和分页排序赋值给 MatTableDataSource ,并将数据源连接到排序和分页组件:
ngOnInit() {
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
- 在模板中创建 MatTable 和分页排序元素:
Column 1 |
{{element.column1}} |
...
- 如果仍然存在问题,请确保数据源的属性名称与模板中定义的属性名称匹配,并将属性名称放入 MatColumnDef 中。
Column 1 |
{{element.column1}} |