Angular Material - 如何在循环中对 mat-table 的数据进行排序

Question

我正在循环内显示 mat 表。记录显示正确，并且还显示排序箭头。我已经使用了

MatSort

，但它不起作用。谁能帮我解决我哪里出错了？

这是我的代码。

HTML：

<div *ngFor="let rc of filteredSizeCode; let i = index" class="table-responsive table-content">
  <h3 class="text-primary mt-1 mb-3">Unit Type : {{rc.unitTypeSizeConcat[0]}}</h3>
  <table mat-table [dataSource]="datasource[i]" matSort class="mat-elevation-z8" matSortDisableClear>
    <ng-container matColumnDef="unitRateType">
      <th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Unit Rate Filter</th>
      <td mat-cell *matCellDef="let row; let i=index">{{row.list.unitRateType}}</td>
    </ng-container>
    <ng-container matColumnDef="rateChangeType">
      <th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Rate Change Type</th>
      <td mat-cell *matCellDef="let row; let i=index">{{row.list.rateChangeType}}</td>
    </ng-container>
    <ng-container matColumnDef="effectiveDate">
      <th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Effective Date</th>
      <td mat-cell *matCellDef="let row; let i=index">{{row.list.effectiveDate | date: 'MM-dd-yyyy'}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

TS：

displayedColumns = [
  'unitRateType',
  'rateChangeType',
  'effectiveDate'
];
@ViewChild(MatSort) sort: MatSort;
datasource: MatTableDataSource<any[]>[] = [];

ngOnInit(){
  this.filteredSizeCode.forEach((size: any) => {
    let data: any[] = size.list.map((x: any) => ({ ...size, list: x }));
    console.log(data);
    this.datasource.push(new MatTableDataSource(data));
  });

  this.datasource[0].sortingDataAccessor = (item: any, property) => {
    console.log(item);
    switch (property) {
      case 'noticeDays':
        return item.list.noticeDays;
      case 'unitRateType':
        return item.list.unitRateType;
      case 'effectiveDate':
        return item.list.effectiveDate;
      default: return item[property];
    }
  }
  
  this.datasource[0].sort = this.sort;
}

Answer 1

假设您已导入

MatSortModule

。

您从视图中获取

MatSort

指令，您只能在

AfterViewInit

生命周期中获取它。

因此，移动自定义

sortingDataAccessor

的逻辑并在

MatSort

方法中初始化

MatTableDataSource

中的

ngAfterViewInit

实例。

ngAfterViewInit() {
  this.datasource[0].sortingDataAccessor = (item: any, property) => {
    console.log(item);
    switch (property) {
      case 'noticeDays':
        return item.list.noticeDays;
      case 'unitRateType':
        return item.list.unitRateType;
      case 'effectiveDate':
        return item.list.effectiveDate;
      default:
        return item[property];
    }
  };

  this.datasource[0].sort = this.sort;  
}

对于多个

MatTableDataSource

实例，您需要通过

MatSort

获取所有

@ViewChildren

指令，并通过索引初始化

MatSort

实例。

import { QueryList, ViewChildren } from '@angular/core';
@ViewChildren(MatSort) sorts: QueryList<MatSort>;

ngAfterViewInit() {
  for (let i = 0; i < this.datasource.length; i++) {
    this.datasource[i].sortingDataAccessor = (item: any, property) => {
      console.log(item);
      switch (property) {
        case 'noticeDays':
          return item.list.noticeDays;
        case 'unitRateType':
          return item.list.unitRateType;
        case 'effectiveDate':
          return item.list.effectiveDate;
        default:
          return item[property];
      }
    };

    this.datasource[i].sort = this.sorts.get(i)!;
  }
}

演示@StackBlitz