MatTableDataSource如何获取数据集的排序顺序

Question

假设我有一个带有mat-sort-header和matSort的mat-table来启用排序，并且带有[dataSource]="tableDetails"。在我将数据提取到sampleData中后，我用以下内容初始化该表：

this.tableDetails = new MatTableDataSource(this.sampleData);

我的样本数据如下，按默认顺序：

sampleData = 
[
{'id':1, 'name':'item 1'},
{'id':2, 'name':'item 2'},
{'id':3, 'name':'item 3'}
]

我可以用this.tableDetails.data[0]获得第一个项目。现在，如果我使用mat-sort-header按降序对带有id的表进行排序，则显示的第一个项目将是{'id':3, 'name':'item 3'}，但this.tableDetails.data[0]仍然返回{'id':1, 'name':'item 1'}。我注意到mat-sort头不会改变数据源的原始顺序。你知道如何获得排序的订单吗？

Answer 1

在dataSource上，您有一个sortData方法，可以用来获取排序的表数据。

MatTableDataSource sortData方法

根据MatSort的状态获取数据数组的排序副本。在对筛选的数据进行更改后或从MatSort发出排序更改时调用。默认情况下，该函数检索活动排序及其方向，并通过使用sortingDataAccessor检索数据来比较数据。可以为数据排序的自定义实现重写。

this.dataSource.sortData(this.dataSource.data, this.dataSource.sort)

Answer 2

您可以在对表进行筛选排序后访问新位置或传递给新数组；

// let yourNewData = [ ... this.dataSource.filteredData]
ngAfterViewInit() {
this.dataSource.sort = this.sort;
console.log(this.dataSource.filteredData[0])
}

Answer 3

此处找到的解决方案：https://github.com/angular/components/issues/11670

this.dataSource.connect().subscribe(d => this.renderedData = d);

事实上，我所做的是(用新行顺序重新创建表(：

this.dataSource.connect().subscribe(data: any) => this.dataSource = new MatTableDataSource(data));