Question

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

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

在请求表中，还有另外一个表集合。我只需要使用此缩进表的前两个值。在这种情况下 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);
}

如您所见，我尝试结合 mat-table 和 mat-sort-header 。不幸的是 mat-table 排序根本不起作用。

Answer 1

如果我记得，为了正确附加分页器和排序功能，必须在视图初始化之后完成。这是因为它们必须存在于DOM中才能正常工作。它可能对您有用，因为构造函数可能会在DOM初始化后完成异步工作，但Id建议将此逻辑移至afterviewinit中。可以说，您向应用程序添加了FE缓存，它可能会中断。

我还认为您最好将未排序的数据（实际数组）从数据源中拉出，然后对其进行排序，然后再使用它来创建新的Mat数据源，因为您直接将数组函数应用于matDataSource对象不？

很抱歉，如果那不能直接回答问题，但是如果您应用它并对其进行调试，则可能会得到答案。

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

Angular Material 2 DataTable Sorting with nested objects

Answer 2

以下是带有简单示例的解决方案：

HTML：

data.Cosine

TS：

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

Angular Material表仅按最后一列排序

2 个答案: