角度垫排序不适用于带有点符号的 matColumnDef答案

【问题标题】：Angular mat-sort not working on matColumnDef with dot notation角度垫排序不适用于带有点符号的 matColumnDef
【发布时间】：2019-07-24 13:31:52
【问题描述】：

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

我尝试通过括号表示法和点表示法访问该属性，但没有给出结果。还将最后一个节点放在 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 定义：

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

有一个dataSource例子：

[
    {
        id: 2,
        name: "Testing",
        user: {
            id: 1, 
            name: "User Testing", 
            username: "test@example.com"
        }
    },
    {
        id: 4,
        name: "Testing_2",
        user: {
            id: 3, 
            name: "User Testing 2", 
            username: "test2@example.com"
        }
    }
]

【问题讨论】：

我认为这可能是解决方案github.com/angular/components/issues/…
我认为你有麻烦哥们，检查值是如何检索的github.com/angular/components/blob/…
我想这会解决你的问题：stackoverflow.com/questions/48891174/…

标签： javascript angular sorting angular-material mat-table

【解决方案1】：

很难找到这方面的文档，但可以使用sortingDataAccessor 和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 Sorting with nested objects

【讨论】：