Как использовать подпункты json в таблице материалов с сортировкой

Question

У меня проблема с таблицей угловых материалов с сортировочными заголовками. Поскольку я использую элементы первого уровня из моего файла json, все работает нормально. Но когда мне нужно использовать сортировку подэлементов, не работает.

Я использую Wordpress REST API, и он возвращает мне что-то вроде этого:

{
  "id": 1361,
  "name": "Item1",
  "price": "15355",
  "weight": "482",
  "dimensions": {
      "length": 1000,
      "width": 550,
      "height": "132"
  }
},
{
  "id": 1362,
  "name": "Item2",
  "price": "12456",
  "weight": "352",
  "dimensions": {
      "length": "610",
      "width": "375",
      "height": "120"
  }
}

Я использую его в таблице материалов и столбцы, такие как: ID, имя, цена и вес работает правильно. К сожалению предметов внутри "габаритов" нет.

В файле .ts каждый столбец имеет правильное имя:

displayedColumns: string[] = ['id', 'name', 'price', 'weight', 'length', 'width', 'height'];

И в html каждый столбец выглядит так:

<ng-container matColumnDef="length">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
    <td mat-cell *matCellDef="let element"> {{element.dimensions.length}} cm</td>
</ng-container>

Я подумал, что, возможно, название столбца неверно, и я изменил его на:

displayedColumns: string[] = ['id', 'name', 'price', 'weight', 'dimensions.length', 'width', 'height'];

И html:

<ng-container matColumnDef="dimensions.length">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
    <td mat-cell *matCellDef="let element"> {{element.dimensions.length}} cm</td>
</ng-container>

Но это все еще не сортировка.

У вас есть идеи, как решить эту проблему?

Спасибо

Answer 1

Сортировка НЕ ​​работает сама по себе. В машинописи определить

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<any>;
private unsubscribe: Subject<void> = new Subject();

ngAfterViewInit() {
 this.sort.sortChange.pipe(takeUntil(this.unsubscribe)).
      subscribe(() => this.sortTable());
}

private sortTable() {
// Use this.sort.active (column name, e.g. 'width', this.sort.direction (string 'asc' or 'desc') 
// to sort the array of your items and call
 this.table.renderRows();
}

ngOnDestroy() {
   this.unsubscribe.next();
   this.unsubscribe.complete();
}

Таким образом, вы получаете ссылку на MatSort и просто сортируете элементы самостоятельно, подписываясь на изменения + визуализацию строк таблицы. Обратите внимание на использование unsubscribe - это стандартный шаблон для предотвращения утечки памяти из-за подписки на наблюдаемые. Сделайте ваши TS до implement AfterViewInit, OnDestroy для использования ngAfterViewInit и ngOnDestroy