使用 PrimeNG 的表格过滤器

Question

我正在尝试实现一个过滤表 (https://primefaces.org/primeng/#/table/filter)，但是我收到的 JSON 有很多级别，例如：

{
  "id": "123",
  "categorie": "nice",
  "place": {
    "rank": "first",
    "person": {
      "name": "Joe"
    }
  }
}

PrimeNG 的文档在组件中做了这个：

export class DynamicColumnsDemo implements OnInit {

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }
}

这在 HTML 上：

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

但是，如何在“字段”属性上放置一个具有更多级别的 JSON，例如：

this.cols = [
  { field: 'place.person.name', header: 'Name' },
];

我已经尝试了 N 种方法，但我不知道这是否可能......

如果有人可以帮助我，谢谢！

问候。

Answer 1

假设我们对 Car 接口有相同的结构，但有一个额外的嵌套字段，如下所示：

export interface Car {
  vin?;
  year?;
  brand?;
  color?;
  price?;
  saleDate?;
  owner?: {
    name?;
    age?;
  };
}

我们希望通过car.owner.name 进行搜索，方法是为该特定列创建自定义过滤器。

这些列是：

this.cols = [
  { field: "vin", header: "Vin" },
  { field: "color", header: "Color" },
  { field: "price", header: "Price" },
  { field: "ownerName", header: "Owner name" } // The field does not matter
];

所以 HTML 文件中列的内容将是：

<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
            <ng-container *ngIf="col.field === 'ownerName'; else simpleTemplate">
                {{rowData.owner.name}}
            </ng-container>
            <ng-template #simpleTemplate>
                {{rowData[col.field]}}
            </ng-template>
        </td>
    </tr>
</ng-template>

此特定列的过滤器标题内容：

    <input *ngSwitchCase="'ownerName'" pInputText type="text" 
           placeholder="Custom - Nested object" 
           (input)="dt.filter($event.target.value, 'owner', 'customNestedObj')">

“customNestedObj”实际上是一个新方法，它从库中附加到 FilterUtils 类，如下所示（在构造函数/ngOnInit 中）：

 FilterUtils["customNestedObj"] = (value, filter): boolean => {
      value = value.name;
      return FilterUtils.contains(value,filter);
    };

Stackblitz：https://stackblitz.com/edit/primeng-tablefilter-demo-9v5bhg?file=src%2Fapp%2Fapp.component.ts