Angular Material mat-table同ID数据合并单行展示问题

我现在在Angular Material的mat-table里，相同ID的数据会显示成多行，但我想把它们合并成单行展示。以下是相关信息：

示例数据 #

[
  {"id": "700","desc": "Tempo","richiesta": "20220087","dataElab": "22/09/2022 06:00","valore": "13,8"},
  {"id": "700","desc": "Tempo","richiesta": "20220088","dataElab": "21/09/2022 06:00","valore": "12,9"},
  {"id": "700","desc": "Tempo","richiesta": "20220089","dataElab": "20/09/2022 06:00","valore": "12,8"}
]

当前HTML代码 #

<table mat-table [dataSource]="data" class="mat-elevation-z8" width="100%">
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> 
    {{element.desc}} </td>
  </ng-container>

  <ng-container *ngFor="let columns of displayedDateColumns" [matColumnDef]="columns">
    <th mat-header-cell *matHeaderCellDef> {{columns}} </th>
    <td mat-cell *matCellDef="let element"> 
    <ng-container *ngIf="element.dataElab == columns">
    {{element.valore}} 
    </ng-container>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

效果说明 #

• 当前效果：ID为700的数据显示3行，每行对应一条原始数据，ID和Name列重复出现，日期列仅对应行有值，其余为空。
• 期望效果：将相同ID的记录合并为单行，ID和Name列只显示一次，所有日期列的对应值都在同一行展示。

实现步骤 #

1. 预处理数据源（组件TS文件） #

先把原始数据按ID分组，将同一ID的不同日期值聚合到一个对象中：

// 假设原始数据存储在originalData变量中
this.data = this.originalData.reduce((acc, curr) => {
  // 查找当前ID是否已存在于聚合数组中
  const existingItem = acc.find(item => item.id === curr.id);
  if (existingItem) {
    // 若存在，将当前日期作为属性，值作为属性值添加
    existingItem[curr.dataElab] = curr.valore;
  } else {
    // 若不存在，创建新对象，包含基础字段和当前日期值
    const newItem = {
      id: curr.id,
      desc: curr.desc,
      [curr.dataElab]: curr.valore
    };
    acc.push(newItem);
  }
  return acc;
}, []);

2. 更新表格HTML代码 #

由于数据源已聚合，无需再用*ngIf判断，直接绑定对应日期列的属性即可：

<table mat-table [dataSource]="data" class="mat-elevation-z8" width="100%">
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> 
      {{element.desc}} 
    </td>
  </ng-container>

  <ng-container *ngFor="let column of displayedDateColumns" [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> 
      {{element[column] || ''}} <!-- 无值时显示空字符串 -->
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

3. 配置显示列集合 #

确保displayedColumns包含基础列和所有日期列：

// 提取所有唯一的日期列
this.displayedDateColumns = [...new Set(this.originalData.map(item => item.dataElab))];
// 组合总显示列
this.displayedColumns = ['id', 'name', ...this.displayedDateColumns];

内容的提问来源于stack exchange，提问作者Michele