Угловой 7: Сортировка Mat-Table с данными из сервиса в качестве MatTableDataSource

Question

Я пытаюсь отсортировать таблицу MatSort в Angular 7, и я новичок в угловых. Данные находятся в источнике данных и отображаются правильно. Мои данные поступают из службы, которую я создал для вызова моего бэкенда, затем я устанавливаю this.dataSource.sort = this.sort, как показано в следующем примере:

https://stackblitz.com/angular/qlbmkgjnvya?file=main.ts (из угловых документов!)

Я пытался следовать примеру из угловых документов, но мне кажется, что я что-то упустил, поскольку сортировка на моем примере ничего не делает, но когда я беру их пример и использую его локально, он работает нормально.

// компонент

    import {MatSort} from '@angular/material/sort';
    ...
    dataSource: MatTableDataSource<any[]>;
    @ViewChild(MatSort) sort: MatSort;
    ...
    ngOnInit() {
    this.api.getData().subscribe(data => {
      this.data= data; // this is an array of the data
      this.dataSource = new MatTableDataSource(this.data); // works enough to display on the page without errors
      this.dataSource.sort = this.sort; // has to be in here to ensure no race condition between the api call and setting the sort property
   });

// просмотр (component.html)

<table mat-table #table [dataSource]="dataSource" matSort>

  <!-- Title Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> data ID </th>
    <td mat-cell *matCellDef="let element" class="id-col"> {{element.dataID}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Сообщения об ошибках не отображаются, но таблица не обновляется.

Answer 1

Если ваши имена данных не совпадают с именами столбцов, функция сортировки не знает, какие данные сортировать, поэтому она ничего не делает (?) И не выдает ошибку. Не знаю, почему я не подумал об этом раньше.