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

发布时间：2020-12-17 17:29:37 所属栏目：安全来源：网络整理

导读：我在我的应用程序中使用了Angular Material,我有两个mat-table,对单个组件进行排序,但我的排序仅在第一个表上有效这是ts代码 @ViewChild(MatSort) inventoryDataSort: MatSort;@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;@ViewChild(M

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

解决方法

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!