4

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

2 回答 2

7

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;
于 2017-12-07T09:10:36.577 回答
0

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

使用 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;
于 2019-11-07T10:40:58.630 回答