Угловой материал объединяет одинаковые значения столбца в таблице и показывает только одно значение для нескольких строк - PullRequest
0 голосов
/ 06 октября 2019

У меня есть поле с названием 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>

1 Ответ

1 голос
/ 07 октября 2019

Я решил эту проблему в проекте с открытым исходным кодом Koia с использованием класса RowSpanComputer . В summary-table.component.html вычисленные диапазоны строк затем используются для определения атрибута rowspan элемента td.

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

Пространственный диапазон Атрибут указывает количество строк, которое должна занимать ячейка. Класс RowSpanComputer вычисляет rowspan для каждой ячейки из указанных данных таблицы (массив строк). Он в основном перебирает строки и увеличивает rowspan для ячеек, пока их значение остается неизменным. Как только значение изменяется, соответствующий rowspan сбрасывается в ноль.

https://stackblitz.com/edit/angular-gevqvq

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...