时间戳

首页 > 解决方案 > matSort 在 mat-table Angular 中无法正常工作

angular - matSort 在 mat-table Angular 中无法正常工作

问题描述

我的 .html 文件：

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

  <ng-container matColumnDef="uid">
    <!--<mat-header-cell *matHeaderCellDef mat-sort-header>Building UID</mat-header-cell>-->
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Building UID
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.uid}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="address">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Address
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.location.address}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="zipCode">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Zip code
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.location.zipCode}}</mat-cell>
  </ng-container>

  ...

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

</mat-table>

我的 .ts 文件：

@Component({
  selector: 'page-buildings',
  templateUrl: 'buildings.html',
})
export class BuildingsPage {
  @ViewChild(MatSort) sort: MatSort;
  ...
  private displayedColumns: string[] = ["uid", "address", "zipCode", "city", "country", "treeDetails"]; // tslint:disable-line
  private dataSource: MatTableDataSource<any>;

  ...
  constructor(...) {

    this.dataSource = new MatTableDataSource(...);
    this.dataSource.sort = this.sort;
  }
  ...
}


但在我的 mat-table 中，排序仅适用于第一列“uid”，不适用于其他列。

我从这个链接（第一个答案）中了解到，在*matColumnDef="firstString"和{{tree.secondString}}中，firstString必须等于secondString才能使其工作，但在我的情况下，它是tree.firstString.secondString，我用了两点。

知道为什么会发生这种情况以及如何使其发挥作用吗？



请看图片： 在此处输入图像描述

当我点击“Building UID”列时，mat-table 将被排序，一切正常。但是当我点击其他列时，（地址，邮政编码，城市，国家），它只会对前两行进行排序，并且只有升序排序有效（降序排序无效），其余的行是根本没有排序。

标签： angular

解决方案

您需要覆盖sortingAccessor：

  this.datasource.sortingDataAccessor = ((item: TableItems, sortHeaderId: string) => {
      return item.data[sortHeaderId];
    });

在这种情况下，数据在 item.data 中而不是 item 中更深一层。

推荐阅读