PrimeNG - 为什么不在数据视图组件中应用多个过滤器？

问题描述

我有一个使用 dataview 组件的项目。我想要做的是用户可以同时按多个字段进行过滤，在这种情况下是名称和类别。问题是它只过滤了一个。

这是完整的数据视图。

当我选择一个类别时，例如“配饰”，它只显示属于该类别的产品。

但是当我输入时，它显示的产品类别与“配饰”不同。这是我的问题。不应用多个过滤器。我做错了什么？

我的代码：

<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name,category" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
    ....
    <p-multiSelect [options]="listCategory" [(ngModel)]="selectedCategory (onChange)="dv.filter($event.value)" defaultLabel="Select category"> </p-multiSelect>
    <span class="p-input-icon-left p-mb-2 p-mb-md-0">
          <i class="pi pi-search"></i>
          <input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
    </span>
...
</p-dataView>

我已经做了一个 stackbliz 来重现这个问题。

• 版本角度：11
• PrimeNG 版本：11

解决方法

在搜索字段的顶部，尝试创建自定义过滤器并使用自定义管道将它们添加到 dataList，假设您想使用下拉列表中的标签值进行过滤： 给出如下列表：

 dataList = [{
    name: 'name1'
    },{
    name: 'name2'
    }]

下拉选择值如 { label:'James',value:'1'}

Primeng 数据视图：

PrimengFilter 组件：数据绑定

<p-dropdown [(ngModel)]="filterNameValue" ...></p-dropdown>

自定义管道

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
  name: 'FilterNamePipe',})
export class FilterNamePipePipe implements PipeTransform {
  transform(items: any[],name: string,value): any[] {
    // in no items are given then return null
    if (!items) {
      return [];
    }

    // if search value is not yet in the input then return all items
    if (!value || value.length === 0) {
      return items;
    }
    // get key value of name in the dictionary and compare with dropdown label value
    const itemsToReturn = items.filter(
      (it) => it[field]=== value.label
    );

    return itemsToReturn;
  }
}