Блог

Есть ли возможность отсортировать столбец с matSort в таблице Angular, где имя свойства отличается от matColumnDef:

 <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>TEST</th>
      <td mat-cell *matCellDef="let box"> {{box.input.name}} </td>
</ng-container>
 

проблема решена следующим образом https://stackblitz.com/edit/mattable-with-sorting-custom?file=app/table-sorting-example.ts

поэтому переименовано

 matColumnDef="name"
 

Для

 matColumnDef="input.name"
 

также в

 public displayedLoadingPointColumns: string[] = ['input.name', ... 
 

добавлен этот метод в файл .ts

 sortColumn($event: Sort): void {
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'input.name': {
          return item.input.name;
        }
        default: {
          return item[property]; }
      }
    };
}
 

в html это выглядит следующим образом:

 <table mat-table [dataSource]="this.dataSource" matSort (matSortChange)="sortColumn($event)">

  <ng-container matColumnDef="input.name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
      <td mat-cell *matCellDef="let whatevet"> {{whatever.input.name}}</td>
  </ng-container>
...