mat-sort-header / mat-sort не работает для определенного столбца, данные которого поступают из другой базы данных

Question

mat-sort не работает с одним столбцом mat-table, полученным из другой базы данных, остальные столбцы работают полностью нормально.Разница лишь в том, что я получаю данные для этого одного столбца из другого сервиса.

Я пытался решить эту проблему с помощью ngAfterViewInit, но безрезультатно.

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
};

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit(){
  this.dataSource.sort = this.sort;
}

Answer 1

Не зная вашей модели данных, что-то вроде этого должно решить вашу проблему (в вашем ngOnInit):

this.dataSource.sortingDataAccessor = (item, property) => {
  if (property === 'name') {
    return item.creator.name;
  } else {
    return item[property];
  }
};

Сортировка в этом поле не работает, поскольку Angular пытается получить доступ к данным столбца с помощью идентификатора строки, который для этого столбца равен name, но данные столбца фактически находятся в element.creator.name (Angular ищет в element.name).

Для получения дополнительной информации ознакомьтесь с полной документацией здесь (полностью внизу страницы), где указано:

Функция доступа к данным, которая используется для доступа к свойствам данных для сортировка по умолчанию функции sortData. Эта функция по умолчанию Предполагается, что идентификаторы заголовка сортировки (по умолчанию имя столбца) соответствует свойствам данных (например, столбец Xyz представляет данные [ 'Xyz']). Может быть установлена ​​пользовательская функция для различного поведения.