对结果进行分组时无法对 Angular mat-table 中的数据进行排序

Question

我按照此视频在我的材质表中创建了分组视图，但我无法对结果进行排序。 我想要的是：

**YEAR**
  All activities during Spring
  All activities during Summer
  All activities during Autumn
  All activities during Winter
**YEAR**
  All activities during Spring
  All activities during Summer
  All activities during Autumn
  All activities during Winter

我为捕获的每个季节分配一个 ActivitySeasonID（春季为 1，夏季为 2 等），然后根据 ActivitySeasonID 对表进行排序。

不幸的是，该组没有 id，因此它将所有这些条目放在顶部而不是有一个组，对其下的所有条目、下一组等进行排序。

HTML

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

    <ng-container matColumnDef="activitySeasonID">
        <mat-header-cell *matHeaderCellDef class="bold" mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.activitySeasonID }} </mat-cell>
    </ng-container>

        <ng-container matColumnDef="activitySeason">
            <mat-header-cell *matHeaderCellDef class="bold"> Season </mat-header-cell>
            <mat-cell *matCellDef="let activity" class="field-text" [ngStyle]="{'color':seasonColour(activity.activitySeason)}"> {{ activity?.activitySeason }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="character">
            <mat-header-cell *matHeaderCellDef class="bold"> Character </mat-header-cell>
            <mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.character }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="activity">
            <mat-header-cell *matHeaderCellDef class="bold"> Activity </mat-header-cell>
            <mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.activity }} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"  mat-row-group></mat-row>
        
        <ng-container matColumnDef="groupHeader">
            <mat-cell *matCellDef="let groupBy" class="bold" style="color: #ffffff; background-color: #011f43">{{groupBy.activityYear}}</mat-cell>
        </ng-container>
        <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></mat-row>

    </mat-table>

TS

const groupBy = function (xs, key) {
  return xs.reduce(function (rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
}

export class CovenantActivitiesComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  displayedColumns = ['activitySeason', 'character', 'activity'];
  dataSource: MatTableDataSource<CovenantActivities>;
  activityData = [];

....constructor, lots of other non-relevant code

ngOnInit(): void {
this.covenantDataService.getCovenantSeasonalActivites(this.covID).subscribe(data => {
   let tempdatasource = []
   this.activityData = groupBy(data, 'activityYear');

   Object.keys(this.activityData).forEach(key => {
     tempdatasource.push({activityYear: key, isGroupBy: true });
     let values = this.activityData[key];
     values.forEach((element) => {tempdatasource.push(element);});
   });

   this.dataSource = new MatTableDataSource<CovenantActivities>(tempdatasource)
   this.sort.sort(({ id: 'activitySeasonID', start: 'asc'}) as MatSortable);
   this.dataSource.sort = this.sort;      
  });
}

isGroup (index, item): boolean {
  return item.isGroupBy;
}

正确分组但未排序：

---

这就是我添加排序时发生的情况：

我的数据源中返回的内容示例：

0: {activityYear: '1220', isGroupBy: true}
1: {activityYear: '1220', activitySeason: 'Summer', activityID: 'jSJuQXp2OchWDXlKAWTS', activity: 'wefsdfsdfsdfsfs', character: 'Britta', …}
2: {activityYear: '1222', isGroupBy: true}
3: {activitySeasonID: 4, activity: 'f fsdf sdfds fsdf sdfsdfs', activitySeason: 'Winter', activityYear: '1222', character: 'Theren', …}
4: {activityYear: '1229', isGroupBy: true}
5: {activity: 'sdfs fsdfsdfsdfsdfsdfsd', activitySeason: 'Winter', activityID: '31nmWjZbix6xlytUXeCA', character: 'Sidorov', activitySeasonID: 4, …}
6: {activity: 'das dasd asd dasd asd asds', character: 'Belisarius', activitySeason: 'Winter', activityID: 'm9AQUecuwhIms7WIslQp', …}
7: {activityYear: '1230', isGroupBy: true}
8: {activity: 'dfs fsdfsdf sdfdsfsdf', activityID: '6X6kAJgakXdfOaXqqN1o', activitySeason: 'Summer', activitySeasonID: 2, activityYear: '1230', …}
9: {activitySeason: 'Spring', activitySeasonID: 1, activity: 'Stuff was done', activityID: 'OMbZzNSqdcuO2uZf9oC6', …}
10: {activityYear: '1230', activityID: 'QTWGNDMzZ01LmTBU1ZaJ', activitySeasonID: 1, character: 'Theren', activitySeason: 'Spring', …}
11: {activityYear: '1233', isGroupBy: true}
12: {activityID: '2WIe1UsWkVHDEQzx9VWp', activitySeason: 'Autumn', activity: ' fsd fsdf sdf sdf sdfsd fsdf', activityYear: '1233', character: 'Theren', …}
13: {activityYear: '1233', character: 'Albertus Magnus', activityID: '3Yfwi7pDDdYjafRBWzc3', activitySeason: 'Summer', activity: 'dsfsd fsdfsdfsdf', …}
14: {activity: 'dfsf fsdfsdfsdfs dsf', activityID: '4EkzaSTwgPAPF7nKU3Sr', activitySeasonID: 2, character: 'Sargon', activityYear: '1233', …}
15: {character: 'Britta', activity: 'sdfdfsdf', activitySeasonID: 3, activitySeason: 'Autumn', activityYear: '1233', …}
16: {activityYear: '1240', isGroupBy: true}
17: {activity: 'sdfsdf dsfsdf sdfsd', activityID: 'ck2bhNb2E1Sgo71RZniJ', activitySeason: 'Summer', character: 'Sargon', activitySeasonID: 2, …}

Answer 1

考虑到这一点，我开始相信在每个排序操作中，您都需要对整个实体列表进行排序并使用 groupBy 函数重新创建组。

我发现的最好的例子：Stackblitz