Angular Material 2：多个 mat-table 排序仅适用于第一个表

Posted 2023-02-22

【中文标题】Angular Material 2：多个 mat-table 排序仅适用于第一个表

【英文标题】：Angular Material 2: Multiple mat-table sorting is working on first table only

【发布时间】：2018-05-21 07:57:36

【问题描述】：

我在我的应用程序中使用了 Angular Material，我有两个 mat-table 对单个组件进行排序，但我的排序仅适用于第一个表

这里是ts代码

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAfterViewInit() 
    this.inventoryDataSource.sort = this.inventoryDataSort;
    this.inventoryDataSource.paginator = this.inventoryDataPaginator;
    this.additionalDataSource.sort = this.additionalDataSort;
    this.additionalDataSource.paginator = this.additionalDataPaginator;

垫表

<mat-table #table1 [dataSource]="inventoryDataSource" matSort>
<mat-table #table2 [dataSource]="additionalDataSource" matSort>

【参考方案1】：

ViewChild 中的选择器查询 DOM 并找到第一个数学。你能试着把这部分从

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;

到

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild('table2', read: MatSort) additionalDataSort: MatSort;
@ViewChild('table2', read: MatPaginator) additionalDataPaginator: MatPaginator;

【讨论】：

仍然不适合我。我正在对所有表格进行分页和排序。

@ViewChild('table2', read: MatPaginator ) paginatorUpcoming: MatPaginator; @ViewChild('table3', read: MatPaginator ) paginatorExpired: MatPaginator; @ViewChild(MatPaginator) paginatorGym: MatPaginator; @ViewChild('table2', read: MatSort ) sortUpcoming: MatSort; @ViewChild('table3', read: MatSort ) sortExpired: MatSort; @ViewChild(MatSort) sortGym: MatSort;

【参考方案2】：

我已经在similar question 中回答了这个问题，但我也会在这里发布。它可能会帮助另一个可怜的灵魂。

使用 Angular v.8.2.0。

我假设所有必需的属性都已使用且正确（mat-sort、mat-table、[dataSource]、matColumnDef、mat-sort-header 等）。

我有一个带有两个可排序表的简单组件（为简洁起见，我省略了不相关的代码）。

每个表在模板中都有一个唯一的 ref 属性。例如：

<table #table1>
<table #table2>

然后，在组件中，我为每个排序器使用 @ViewChild 装饰器：

@ViewChild('table1',  read: MatSort, static: true ) sort1: MatSort;
@ViewChild('table2',  read: MatSort, static: true ) sort2: MatSort;

read 属性在这里非常重要。不要错过！

然后（在ngOnInit 中），我将排序器分配给每个表数据源，如官方文档中所示：

this.dataSource1.sort = this.sort1;
this.dataSource2.sort = this.sort2;