Angular Material 2:多垫表排序仅适用于第一个表 [英] Angular Material 2: Multiple mat-table sorting is working on first table only

问题描述

我在我的应用程序中使用了 Angular Material 并且我有两个 mat-table 对单个组件进行排序，但我的排序只在第一个表上工作

I have used Angular Material in my application and I have two mat-table with sorting on single component but my sorting is working only on first 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>

推荐答案

ViewChild 中的选择器查询 DOM 并找到第一个数学.您可以尝试从

Selector in ViewChild queries DOM and it finds first math. Could you try change this part from

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

这篇关于Angular Material 2:多垫表排序仅适用于第一个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！