Угловая сортировка таблицы по столбцу, когда имя столбца не совпадает с именем свойства данных - PullRequest
Новая
       7

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

0 голосов
/ 08 ноября 2019

Я пытаюсь отсортировать таблицу, построенную из углового материала. Следуя примеру документации: https://v5.material.angular.io/components/table/examples Мне удается сортировать таблицы по столбцам, когда имя столбца соответствует имени свойства данных.

Например, если мой объект: foo.name, когда я использую:

html: 

 <table style="width: 100%;" mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
       <td mat-cell *matCellDef="let row"> {{ row.name }} </td>
    </ng-container
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

ts: 

displayedColumns: Array<string> = ['name'];

Работает нормально.

Однако, если моя структура объекта отличается (например, в моем случае я нашел имя в foo.propieties.name), я не найду способ сделать заказ по имени.

Я обнаружил, что:

По умолчанию MatTableDataSource сортируется с предположением, что имя отсортированного столбца соответствует имени свойства данных, которое отображает столбец.

, но я не нашел никакого решения дляслучаи, когда это не так

1 Ответ

1 голос
/ 08 ноября 2019

В HTML: 

 <ng-container matColumnDef="foo.propieties.name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

в .ts 

sortingDataAccessor(item, property) { 
     console.log(item);
    if (property.includes('.')) { 
      return property.split('.')
        .reduce((object, key) => object[key], item);
    }
    return item[property];
  }
ngAfterViewInit() {
    this.dataSource.sortingDataAccessor = this.sortingDataAccessor; 
    this.dataSource.sort = this.sort; 
  }

displayedColumns = ['foo.properties.name'];
...