Angular Material表仅按最后一列进行排序

Question

你好，我使用Angular Material，并尝试以以下格式在表中显示数据：

{
"error": [],
"result": {
"ADAUSD": {
"asks": [
[
"0.068890",
"22428.508",
1540845036
],
[...]

在asks表中，还有另一组表。我只需要使用这个缩进表的前两个值。在这种情况下，0.068890和22428.508。所以我得到了两列，我将其命名为Rate和Quantity。数据正在正确打印，但数据仅按最后一列排序
因为在这种JSON数据格式中没有对象，只有表，所以会产生很多问题。

以下是组件HTML:

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" matSortActive="Quantity" matSortDirection="asc" matSortDisableClear class="mat-elevation-z8">
<ng-container matColumnDef="Quantity">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Quantity"> Quantity </th>
<td mat-cell *matCellDef="let element"> {{element[1]}} </td>
</ng-container>
<ng-container matColumnDef="Rate">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Rate"> Rate </th>
<td mat-cell *matCellDef="let element"> {{element[0]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5]"></mat-paginator>

和组件TS:

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { MatSort, MatPaginator, MatTableDataSource, Sort} from '@angular/material';
import { OrderBookKrakenService } from 'src/app/core/order-book-kraken/order-book-kraken.service';
@Component({
selector: 'app-kraken-sell-usd-ada',
templateUrl: './kraken-sell-usd-ada.component.html',
styleUrls: ['./kraken-sell-usd-ada.component.css']
})
export class KrakenSellUsdAdaComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = ['Quantity', 'Rate'];
dataSource;
sortedData;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private orderBookService: OrderBookKrakenService) {
this.getTransfers();
}
ngOnInit() {
}
ngAfterViewInit() {
}
private getTransfers(): void {
const currency1 = 'ADA';
const currency2 = 'USD';
this.orderBookService.getOrderBookKraken(currency1, currency2)
.subscribe(orders => {
if (!orders) { return; }
console.log(orders);
this.dataSource = orders.result.ADAUSD.bids;
this.dataSource = this.dataSource.slice();
//this.dataSource.sort = this.sort;
this.sortedData.paginator = this.paginator;
});
}
sortData(sort: Sort) {
const data = this.dataSource.slice();
if (!sort.active || sort.direction === '') {
this.dataSource = data;
return;
}
this.dataSource = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'Quantity': return compare(a, b, isAsc);
case 'Rate': return compare(a, b, isAsc);
default: return 0;
}
});
}
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

如您所见，我尝试将垫表和垫子排序标头组合在一起。遗憾的是，垫表排序根本不起作用。

Answer 1

下面是一个简单示例的解决方案：

HTML:

<table matSort (matSortChange)="sortData($event)">
<tr>
<th mat-sort-header="quantity">Quantity</th>
<th mat-sort-header="rate">Rate</th>
<th mat-sort-header="timestamp">Timestamp</th>
</tr>
<tr *ngFor="let dessert of sortedData">
<td>{{dessert[0]}}</td>
<td>{{dessert[1]}}</td>
<td>{{dessert[2]}}</td>
</tr>
</table>

TS:

import {Component} from '@angular/core';
import {Sort} from '@angular/material';
export interface Dessert {
listOfLists : number[][];
}
@Component({
selector: 'sort-overview-example',
templateUrl: 'sort-overview-example.html',
styleUrls: ['sort-overview-example.css'],
})
export class SortOverviewExample {
desserts: Dessert['listOfLists'] = [
[1.00, 2500.00, 9459599599],
[1.05, 2505.00, 9459599533],
[1.10, 2495.00, 9459599466]
];
sortedData: Dessert['listOfLists'];
constructor() {
this.sortedData = this.desserts.slice();
}
sortData(sort: Sort) {
const data = this.desserts.slice();
if (!sort.active || sort.direction === '') {
this.sortedData = data;
return;
}
this.sortedData = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'quantity': return compare(a[0], b[0], isAsc);
case 'rate': return compare(a[1], b[1], isAsc);
case 'timestamp': return compare(a[2], b[2], isAsc);
default: return 0;
}
});
}
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Answer 2

如果我还记得的话，为了正确地附加分页器和排序功能，它必须在视图初始化之后完成。这是因为它们必须存在于DOM中才能正常工作。它可能对您有用，因为构造函数可能在DOMinit之后完成异步工作，但我建议将此逻辑移动到afterviewinit中。比方说，你在应用程序中添加FE缓存，它会出现故障。

我还认为，在使用它创建新的mat数据源之前，您可能会更好地从数据源中提取未排序的数据(实际数组(，然后对其进行排序，因为您正在matDataSource对象上直接应用数组函数？

很抱歉，如果这不能直接回答问题，但如果你应用并调试它，可能会得到答案。

编辑：如果您想更改默认排序访问行属性的方式，请查看此处的首要答案：

带嵌套对象的Angular Material 2 DataTable排序