角材料在表中合并相同的列值，并且仅显示多行的单个值

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类在开源项目RowSpanComputer中解决了这个问题。在summary-table.component.html中，然后使用计算出的行跨度来定义rowspan元素的td属性。

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

rowspan属性指定单元格应跨越的行数。 RowSpanComputer类为指定表数据（行数组）中的每个单元格计算rowspan。只要它们的值保持不变，它就基本上遍历行并为单元格增加rowspan。值更改后，相应的rowspan将重置为零。