Сортировка с использованием mat-таблицы для вложенных свойств - PullRequest
Новая
       15

Сортировка с использованием mat-таблицы для вложенных свойств

0 голосов
/ 12 декабря 2018

У меня есть следующая таблица 

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation">

<!-- Name Column -->
<ng-container matColumnDef="employee.name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.employee.name}}</td>
    </ng-container>

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.id}}</td>
    </ng-container>

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

С этот ответ , matColumnDef, а свойство объекта должно иметь одинаковое имя.

Я понял это правильно для employeeWrapper.id, и сортировка работает.

Но для employeeWrapper.employee.name это свойство второго уровня.Установка matColumnDef на employee.name или name не работает.Я пробовал оба.

Есть ли решение / обходной путь для этой проблемы?

1 Ответ

0 голосов
/ 12 декабря 2018

Вы можете написать небольшую вспомогательную функцию для вычисления значения вложенного свойства с учетом его пути и использовать его для переопределения значения по умолчанию sortingDataAccessor вашего dataSource, что-то вроде 

getPropertyByPath(obj: Object, pathString: string){
  return pathString.split('.').reduce((o, i) => o[i], obj);
}

dataSource.sortingDataAccessor = (data, sortHeaderId: string) => {
  return getPropertyByPath(data, sortHeaderId);
};

Youтакже необходимо установить свойство mat-sort-header mat-header-cell равным вашей вложенной строке свойств (см. демонстрацию для уточнения).

Демонстрация Stackblitz

...