2

我有一个名为 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>
4

1 回答 1

3

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

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

rowspan属性指定单元格应跨越的行数。RowSpanComputer类从指定的表数据（行数组）中计算每个单元格的值。只要它们的值保持不变，rowspan它基本上会遍历行并递增for 单元格。rowspan一旦值发生变化，对应的值就会rowspan重置为零。

请看看这个StackBlitz

于 2019-10-07T08:42:32.053 回答