angular - PrimeNg turbotable 过滤器不适用于行组

Question

我有一个p-table使用行分组和过滤功能的。这些功能本身就可以正常工作，但是当我一起使用它们时，在应用任何过滤器时，分组的第一列都会消失。这发生在所有分组类型（子标题、行跨度等）上。

下面的代码显示了一个包含四列的简单表，其中第一列 (EmpName) 分组为 Rowspan。对每一列都应用了一个简单的过滤器。当表格第一次出现时，它看起来很好。一旦您在过滤器中键入任何内容，第一个值 (empName) 就会消失并且值会出现偏差，即第二列的值会显示在第一列中，依此类推。任何帮助或指示将不胜感激。谢谢！

<h3>Rowspan</h3>
<p-table  #dt [columns]="cols" [value]="empList" sortField="empName"  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"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'empName'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empNbr'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empDept'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empHrs'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td *ngIf="rowGroupMetadata[rowData.empName].index === rowIndex" [attr.rowspan]="rowGroupMetadata[rowData.empName].size">
                {{rowData.empName}}
            </td>
            <td>{{rowData.empNbr}}</td>
            <td>{{rowData.empDept}}</td>
            <td>{{rowData.empHrs}}</td>
        </tr>
    </ng-template>
</p-table>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  empList: any = [];
  rowGroupMetadata: any;
  cols: any[];

  constructor() {}

  ngOnInit(): void {

    this.empList = [
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:16},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:5},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:8},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs:12},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs: 10},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 8},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 12},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 20},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 22},
      {empName:'Mary Smith', empNbr:4444, empDept:'Sales', empHrs: 28},
    ];

    this.cols = [
      { field: 'empName', header: 'EmpName'},
      { field: 'empNbr', header: 'EmpNbr'},
      { field: 'empDept', header: 'EmpDept'},
      { field: 'empHrs', header: 'EmpHrs'}
    ];

    this.updateRowGroupMetaData();
  }

  onSort() {
    this.updateRowGroupMetaData();
  }

  updateRowGroupMetaData() {
    this.rowGroupMetadata = {};
    if (this.empList) {
        for (let i = 0; i < this.empList.length; i++) {
            let rowData = this.empList[i];
            let empName = rowData.empName;
            if (i == 0) {
                this.rowGroupMetadata[empName] = { index: 0, size: 1 };
            }
            else {
                let previousRowData = this.empList[i - 1];
                let previousRowGroup = previousRowData.empName;
                if (empName === previousRowGroup)
                    this.rowGroupMetadata[empName].size++;
                else
                    this.rowGroupMetadata[empName] = { index: i, size: 1 };
            }
        }
        console.log(this.rowGroupMetadata);
    }
  }

}

标签： angularprimengprimeng-turbotable

Answer 1

onFilter(event) {
   this.updateRowGroupMetaData(event.filteredValue);
}

updateRowGroupMetaData(data) {
        this.rowGroupMetadata = {};
        if (data) {
            for (let i = 0; i < data.length; i++) {
                let rowData = data[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 };
                }
            }
        }
    }

<p-table ... (onFilter)="onFilter($event)">

参考：点击这里。