使用 mat-table 对嵌套属性进行排序

Question

我有以下table

<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 不起作用。我都试过了。

这个问题有solution/workaround吗？

Answer 1

您可以编写一个小辅助函数来计算给定路径的嵌套属性的值，并使用它来覆盖 dataSource 的默认值 sortingDataAccessor，例如

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

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

您还必须将 mat-header-cell 的 mat-sort-header 属性设置为等于嵌套的属性字符串（请参阅演示以了解详情）。

Stackblitz demo

使用 mat-table 对嵌套属性进行排序

Sorting using mat-table for nested properties

javascript

angular-material

angular

mat-table