如何在循环中对数据进行排序

Question

我正在循环内显示垫子表。记录显示正确，并且排序箭头也显示。我使用过 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