MatSort：属性名称不同于 matColumnDef -> 不工作答案

【问题标题】：MatSort: property name different from matColumnDef -> Not workingMatSort：属性名称不同于 matColumnDef -> 不工作
【发布时间】：2021-05-12 04:51:28
【问题描述】：

是否有机会在属性名称与 matColumnDef 不同的 Angular 表中使用 matSort 对列进行排序：

<ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>TEST</th>
      <td mat-cell *matCellDef="let box"> {{box.input.name}} </td>
</ng-container>

【问题讨论】：

请分享失败的排序代码
很高兴您找到了解决方案 :-)

标签： angular typescript angular-material-table

【解决方案1】：

解决了以下https://stackblitz.com/edit/mattable-with-sorting-custom?file=app%2Ftable-sorting-example.ts的问题

因此改名

matColumnDef="name"

到

matColumnDef="input.name"

也在

public displayedLoadingPointColumns: string[] = ['input.name', ...

在 .ts 文件中添加了这个方法

sortColumn($event: Sort): void {
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'input.name': {
          return item.input.name;
        }
        default: {
          return item[property]; }
      }
    };
}

在 html 中如下所示：

<table mat-table [dataSource]="this.dataSource" matSort (matSortChange)="sortColumn($event)">

  <ng-container matColumnDef="input.name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
      <td mat-cell *matCellDef="let whatevet"> {{whatever.input.name}}</td>
  </ng-container>
...

【讨论】：