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

【问题标题】：Angular Material 2: Multiple mat-table sorting is working on first table onlyAngular Material 2：多个 mat-table 排序仅适用于第一个表
【发布时间】：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>

【问题讨论】：

标签： angular angular-material2 angular-cdk

【解决方案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;

【讨论】：