Angular material 合并 table 中的相同列值，并仅显示多行的单个值

Question

我有一个名为 purchase_id 的字段，它对于多个记录是相同的。许多记录具有相同的purchase_id。目前，我为多个记录显示相同的 purchase_id，但现在我想合并具有相同 purchase_id 的单元格，并对相同的记录只显示一次 purchase_id 提前致谢我的代码

    <table mat-table [dataSource]="dataSource" matSort matSortActive="serial_no" matSortDirection="desc" class="mat-elevation-z8" >


      <ng-container matColumnDef="serial_no">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Serial number </th>
        <td mat-cell *matCellDef="let element"> {{element.serial_no}} </td>
        <td mat-footer-cell *matFooterCellDef> Total  </td>

      </ng-container>

      <ng-container matColumnDef="purchase_id">
        <th mat-header-cell *matHeaderCellDef> Purchase_id </th>
        <td mat-cell *matCellDef="let element"> {{element.purchase_id}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="product_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
        <td mat-cell *matCellDef="let element"> {{element.product_name}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Quantity </th>
        <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
        <td mat-footer-cell *matFooterCellDef> {{totalquant}} </td>


      </ng-container>

      <ng-container matColumnDef="buyingprice">
        <th mat-header-cell *matHeaderCellDef> Buyingprice </th>
        <td mat-cell *matCellDef="let element"> {{element.buyingprice}} </td>
        <td mat-footer-cell *matFooterCellDef>{{(totalPrice)}}  </td>

      </ng-container>


      <ng-container matColumnDef="vendor_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vendor Name </th>
        <td mat-cell *matCellDef="let element"> {{element.vendor_name}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Answer 1

我在开源项目 Koia using a RowSpanComputer class. Within summary-table.component.html 中解决了这个问题，然后使用计算的行跨度来定义 td 元素的 rowspan 属性。

[attr.rowspan]="rowSpans[iCol][iRow].span"

rowspan attribute specifies the number of rows a cell should span. The RowSpanComputer class 为指定的 table 数据（行数组）中的每个单元格计算 rowspan。它基本上遍历行并递增 rowspan 单元格，只要它们的值保持不变。一旦值发生变化，相应的 rowspan 将重置为零。

请看这个StackBlitz

Angular material 合并 table 中的相同列值，并仅显示多行的单个值

Angular material combine same column values in table and show only single value for multiple rows

angular-material

angular-material-table