Angular: MatSort не работает при использовании объекта внутри источника данных

Question

У меня есть угловое приложение, в котором есть таблица матов.Данные для таблицы заполняются, как показано ниже.Сортировка работает для полей position и name, но не для weight и symbol, которые являются частью объекта detail.Я также попытался назвать столбцы как detail.weight в displayedColumns и matColumnDef, но безуспешно.Посоветуйте, пожалуйста, что я делаю не так?

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', detail: {weight: 4.0026, symbol: 'He'}},
  {position: 2, name: 'Helium', detail: {weight: 4.0026, symbol: 'He'}},
]

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

Шаблон

 <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.detail.weight}} </td>
  </ng-container>

Вот URL стекаблика для проблемы
https://stackblitz.com/edit/angular-kumdeq

Answer 1

Использовать sortingDataAccessor, который

Позволяет настраивать сортировку путем переопределения sortingDataAccessor, который определяет способ доступа к свойствам данных.

Добавить этот фрагмент кода внутри ngOnInit:

   this.dataSource.sortingDataAccessor = (item, property) => {
     switch (property) {
       case 'weight': return  item.detail.weight;
       case 'symbol': return  item.detail.symbol;
       default: return item[property];
  }

Ссылка: https://stackblitz.com/edit/angular-kumdeq-z4bags