Question

我在我的应用程序中使用了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>

Answer 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;

Answer 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;

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

2 个答案: