Kendo UI致力于新的开发来满足不断变化的需求通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件telerik致力于提供纯粹的高性能Angular UI组件无需任何jQuery依赖关系。Angular Material是Angular团队创建的一个流行库本文将为大家介绍如何使用mat-table来构建一个数据网格。在上文中我们为大家介绍了如何开始使用Angular Material构建一个数据网格本文将继续介绍如何进行排序、过滤和分页等。添加分页当显示大量数据时分页是一个很好的功能为了提供分页Angular Material提供了mat-paginator。首先我们将模块MatPaginatorModule导入到模块中。import { MatPaginatorModule } from angular/material/paginator; NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MatTableModule, MatPaginatorModule, ],编辑app.component.ts并为分页器ViewChild添加一个新属性要从模板访问MatPagination请将代码更新到订阅中并将MatTableDataSource的一个新示例设置为datasource该实例使用来自订阅和分页器视图子的数据。ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator; ngOnInit(): void { this.nbaService.getData().subscribe((data) { this.dataSource new MatTableDataSourceany(data); this.dataSource.paginator this.paginator; }); }接下来更新模板来将表与数据源连接起来并使用分页选项列表配置表分页器添加指令showFirstLastButton激活导航按钮从最后移动到第一个。table mat-table [dataSource]dataSource classmat-elevation-z8 #mytable ... /table mat-paginator [pageSizeOptions][3, 5, 10] showFirstLastButtons/mat-paginator添加排序要允许用户对数据进行排序请使用MatSort。首先在app.module中导入MatSortModule。import { MatSortModule } from angular/material/sort; NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MatSortModule, MatTableModule, MatPaginatorModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}首先为分页器添加一个viewchild将MatSort导入app.component.ts并声明一个viewchild排序来将其链接到模板。import { MatSort } from angular/material/sort; ViewChild(MatSort, { static: true }) sort!: MatSort;在ngOnInit生命周期中赋值给数据源排序属性MathSort viewchild。ngOnInit(): void { this.nbaService.getData().subscribe((data) { this.dataSource new MatTableDataSourceany(data); this.dataSource.paginator this.paginator; this.dataSource.sort this.sort; }); }编辑app.component.html将matSort指令添加到表中并为每一列添加mat-sort标题。table mat-table [dataSource]dataSource classmat-elevation-z8 #mytable matSort tr mat-header-row *matHeaderRowDefcolumns /tr tr mat-row *matRowDeflet row; columns: columns;/tr ng-container matColumnDefname th mat-header-cell *matHeaderCellDef mat-sort-headerName/th td mat-cell *matCellDeflet t{{ t.first_name }}/td /ng-container ng-container matColumnDefteam th mat-header-cell *matHeaderCellDef mat-sort-headerPosition/th td mat-cell *matCellDeflet t{{ t.position }}/td /ng-container /table添加过滤Angular Material现在并没有附带特定的组件或过滤器指令为了解决这个问题必须手动实现数据过滤。我们定义了一个名为filter的方法每当用户在mat-input控件中输入或删除一个字符时都会执行该方法filter(event: Event) { const filter (event.target as HTMLInputElement).value; this.dataSource.filter filter.trim().toLowerCase(); }当初始化dataSource的filter属性时视图中显示的数据将被更新。input matInput (keyup)filter($event) placeholderfind结果提高性能有时我们必须在表或列表中显示大量的数据在DOM中添加所有这些元素会导致问题并迫使应用程序变慢。Angular CDK提供了一个虚拟滚动来只显示视图中项目的一小部分它保持了DOM元素的数量不变提高了应用程序的性能。不幸的是默认情况下虚拟滚动CDK不能与mat-table一起工作但是包GitHub - diprokon/ng-table-virtual-scroll: Virtual Scroll for Angular Material Table(不是官方的)是一个允许在mat-table中使用虚拟滚动的指令。import { MatSortModule } from angular/material/sort; import { ScrollingModule } from angular/cdk/scrolling; import { TableVirtualScrollModule } from ng-table-virtual-scroll; NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MatSortModule, MatTableModule, MatPaginatorModule, ScrollingModule, TableVirtualScrollModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {},将MatTableDataSource更改为TableVirtualScrollDataSource。this.nbaService.getData().subscribe((data) { this.dataSource new TableVirtualScrollDataSource(data); });注意ng-table-virtual-scroll不是官方包。编辑模板cdk-virtual-scroll-viewport tvsItemSize30 headerHeight56 classwrapper mat-elevation-z2 styleheight: 400px .... /cdk-virtual-scroll-viewport