Таблица угловых материалов сортируется только по последнему столбцу

Question

Здравствуйте, я использую Angular Material и пытаюсь отобразить в таблице данные в следующем формате:

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

В просит table есть еще одна коллекция таблиц. Мне нужно использовать только первые два значения этой таблицы с отступом. В этом случае 0,068890 и 22428.508 . Итак, я получил два столбца, которые я назвал Оценить и Количество . Данные печатаются правильно, но данные сортируются только по последнему столбцу.
Поскольку в этом формате данных 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>

А, компонент ТС:

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

Вот решение с простым примером:

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

Если я не забуду, чтобы правильно подключить функции разбивки на страницы и сортировки, это нужно сделать после просмотра init. Это потому, что они должны существовать в DOM, чтобы он работал правильно. Это может работать для вас, так как конструктор может выполнять асинхронную работу, которая завершается после инициализации DOM, но я рекомендую перенести эту логику в afterviewinit. Допустим, вы добавили кеширование FE в свое приложение, и оно сломается.

Я также думаю, что вам может быть лучше извлечь несортированные данные (фактический массив) из источника данных, а затем отсортировать их перед использованием их для создания нового источника данных mat, поскольку вы непосредственно применяете функцию массива к объекту matDataSource нет

Извините, если это не дает прямого ответа на вопрос, но если вы примените это и отладите, это может привести к ответу.

РЕДАКТИРОВАТЬ: Если вы хотите изменить способ доступа к свойствам сортировки по умолчанию в строке, взгляните на верхний ответ здесь:

Угловой материал 2 DataTable Сортировка с вложенными объектами