角度垫排序不适用于带点表示法的 matColumnDef

我正在尝试按列对表进行排序。 当我必须过滤另一个结果中的结果时，就会出现问题。

我尝试通过括号表示法和点表示法访问该属性，但没有给出结果。 还将最终节点放置在 matColumnDef 中，但失败，因为有 2 列同名。

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

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

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

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

</table>

显示列定义：

displayedColumns = ['name', 'user.name'];

有一个数据源示例：

[
    {
        id: 2,
        name: "Testing",
        user: {
            id: 1, 
            name: "User Testing", 
            username: "[email protected] /cdn-cgi/l/email-protection"
        }
    },
    {
        id: 4,
        name: "Testing_2",
        user: {
            id: 3, 
            name: "User Testing 2", 
            username: "[email protected] /cdn-cgi/l/email-protection"
        }
    }
]

很难找到这方面的文档，但是可以通过自定义sortingDataAccessor of MatTableDataSource https://v5.material.angular.io/components/table/api#MatTableDataSource和一个 switch 语句。

例如：

@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      case 'project.name': return item.project.name;
      default: return item[property];
    }
  };
  this.dataSource.sort = sort;
}

在这里找到：Angular Material 2 DataTable 使用嵌套对象进行排序 https://stackoverflow.com/questions/48891174/angular-material-2-datatable-sorting-with-nested-objects/50073283