首先,在 Angular 项目中安装必要的依赖:
npm install --save @angular/material @angular/cdk
在你的 Angular 组件中导入相关模块:
import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort';
在组件类中声明以下变量:
dataSource: MatTableDataSource
在你的组件中,创建一个数组来保存你要展示的数据,然后将其赋值给 dataSource
:
const data = [ {name: 'John', age: 30, city: 'New York'}, {name: 'Mary', age: 25, city: 'San Francisco'}, {name: 'Bob', age: 40, city: 'Chicago'}, {name: 'Sam', age: 22, city: 'Los Angeles'} ]; this.dataSource = new MatTableDataSource(data);
在模板中,添加一个
标签,并绑定 dataSource
和 displayedColumns
:
最后,在组件的 ngAfterViewInit
生命周期钩子函数中初始化 MatSort
:
ngAfterViewInit() { this.dataSource.sort = this.sort; }
这样你就可以愉快地使用 MatSort
来展示你的数据,同时支持字母数字排序了!