DataTable行组不适用于过滤器列和列排序

问题描述

我正在将p表与行组一起使用，有指向primeNG文档https://primefaces.org/primeng/showcase/#/table/rowgroup的链接

添加过滤器和列排序会破坏行分组。请参阅示例项目以进行复制。尝试按年份“ 1990”进行过滤，结果将获得2行，但品牌组丢失了。排序通过将行排在最前面而没有任何分组，从而使竞争更加激烈

https://stackblitz.com/edit/primeng-tablerowgroup-demo-vp1wjb?file=src%2Fapp%2Fapp.component.html

一种解决它的方法，以某种方式找到表中可见的行，并使用这些行调用updateRowGroupMetaData（），那么我如何知道哪些行尤其在过滤器后可见？也许还有另一种解决方法？

模板：

<p-table #tt [columns]="cols" [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
<ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
                        ariaLabelDesc="Activate to sort in descending order"
                        ariaLabelAsc="Activate to sort in ascending order">
                    </p-sortIcon>
            </th>
        </tr>
         <tr>
                <th *ngFor="let col of columns" >
                    <input pInputText type="text" (input)="tt.filter($event.target.value,col.field,'contains')"
                        [value]="tt.filters[col.field] ? tt.filters[col.field].value : ''" style="width:100%">
                </th>
            </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <span style="font-weight:bold">{{rowData.brand}}</span>
            </td>
        </tr>
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
</p-table>

组件：

  ngOnInit() {
    this.carService.getCarsMedium().then(cars => {
      this.cars = cars;
      this.updateRowGroupMetaData();
    });
     this.cols = [
      { field: "vin",header: "vin" },{ field: "year",header: "year" },{ field: "color",header: "color" },];
  }

  onSort() {
    this.updateRowGroupMetaData();
  }

  updateRowGroupMetaData() {
    this.rowGroupMetadata = {};
    if (this.cars) {
      for (let i = 0; i < this.cars.length; i++) {
        let rowData = this.cars[i];
        let brand = rowData.brand;
        if (i == 0) {
          this.rowGroupMetadata[brand] = { index: 0,size: 1 };
        } else {
          let prevIoUsRowData = this.cars[i - 1];
          let prevIoUsRowGroup = prevIoUsRowData.brand;
          if (brand === prevIoUsRowGroup) this.rowGroupMetadata[brand].size++;
          else this.rowGroupMetadata[brand] = { index: i,size: 1 };
        }
      }
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular primeng