代码之家 › 专栏 › 技术社区 › Xpleria Dholu

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

mat-table angular-material angular javascript

0

Xpleria Dholu · 技术社区 · 7 年前

我有下表

<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>

this answer matColumnDef 和 对象属性 必须有相同的名字。

我把它弄对了 employeeWrapper.id

要不是 employeeWrapper.employee.name ,这是一个二级属性。设定到 employee.name 或 name

是否有此问题的解决方案/解决方法?

1 回复 | 直到 7 年前

1

6

bugs 7 年前

您可以编写一个小助手函数来计算给定路径的嵌套属性的值,并使用它覆盖默认值 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);
};

mat-sort-header mat-header-cell

Stackblitz demo