Как включить сортировку в таблице угловых данных материала, если источником данных является Наблюдаемый <T>

Question

В моем компоненте есть следующая таблица:

<table [dataSource]="(searchResults$ | async)?.accounts" mat-table matSort multiTemplateDataRows>

          <ng-container matColumnDef="Code">
            <th *matHeaderCellDef mat-header-cell mat-sort-header> Account Code</th>
            <td *matCellDef="let account" mat-cell> {{account.code}} </td>
          </ng-container>

</table>

Я сохранил директиву mat-sort как в определении столбца, так и на уровне таблицы.
Все примеры приведены в https://material.angular.io/components/table/examples - выводит список источников данных, если он установлен из файла TS не как наблюдаемый поток.

Answer 1

Точно так же.Вы просто отсортируете элементы внутри Observable.

(matSortChange)="sortData($event)"

И затем отсортируете:

sortData(sort: Sort) {
    this.searchResults$ = this.searchResults$.pipe(map(results => {
        // sort the results like in examples
    }));
  }