Angular Material mat-table Row Grouping from property

Question

我想在一行中顯示具有相同 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>

目前看來

這個怎么做：

想要的視圖

謝謝

Answer 1

您需要Array.reduce()迭代數組中的每個元素，append 鍵值對，以dataElab作為鍵， valore作為元素的值，並將元素添加到新數組中。

this.data = this.data.reduce((acc: any[], cur: any) => {
  let index = acc.findIndex((x) => x.id == cur.id);
  if (index == -1) {
    cur[cur.dataElab] = cur.valore;
    acc.push(cur);
  } else {
    acc[index][cur.dataElab] = cur.valore;
  }

  return acc;
}, []);

日期列

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

演示@StackBlitz