Блог

У меня проблема с таблицей материалов Angular с заголовками сортировки. Насколько я использую элементы первого уровня из моего файла 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, name, price и weight работают правильно.
К сожалению, элементов внутри «измерений» нет.

В файле .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>
  

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

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

Спасибо

Сортировка НЕ работает сама по себе. В typescript определите

 @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