primeng Table 中自定义过滤布尔值的问题

Question

我正在使用 primeng Table 在我的 Angular 应用程序中显示数据，我现在遇到的问题是我必须使用过滤器但有条件，例如，如果用户键入 0、1 或 2，我必须显示基于此的数据，我正在尝试的是这个

        if(value == 0) {
            table.filter(value, fieldName, 'equals');
        } else if(value == 1) {
            table.filter(0, fieldName, 'gt');
            table.filter(false, 'array[0].fieldName',  'equals');
        } else if(value == 2) {
            table.filter(0, fieldName, 'gt');
            table.filter(true, 'array[0].fieldName',  'equals');
        }

如果用户输入 0，它的过滤很好，但问题是当他输入 1 或 2 时，因为我必须从 2 个字段中过滤，我不确定我想做的事情在 primeng 中是否可行。

Answer 1

table.filter(...) 适用于单个列。

它旨在过滤特定列上的数据。下面是filter函数的类型定义：

filter(value: any, field: any, matchMode: any): void;

但是你走在正确的道路上，因为可以设置不同的过滤器，每列一个，然后与 AND 组合以过滤 table 的数据。

例如，以下函数可以使用多列进行过滤：

filter(dt) {
  dt.filter('Blue', 'color', 'equals');
  dt.filter('Bmw', 'brand', 'equals');
}

这是一个模板示例：

<p-table #dt [value]="cars">
  <ng-template pTemplate="header">
     <tr>
      <th>
        Color
      </th>
      <th>
        Brand
      </th>
     </tr>
   </ng-template>
   <ng-template pTemplate="body" let-car>
     <tr>
      <td>{{car.color}}</td>
      <td>{{car.brand}}</td>
     </tr>
   </ng-template>
</p-table>

<button (click)="filter(dt)">Get Blue Bmw</button>

以及一个完整的组件：

export class MyComponent {
  cars: {
    color: string;
    brand: string;
  }[];

  constructor() {
    this.cars = [{
      color: "blue",
      brand: "bmw"
    },{
      color: "red",
      brand: "bmw"
    }];
  }

  filter(dt) {
    dt.filter('Blue', 'color', 'equals');
    dt.filter('Bmw', 'brand', 'equals');
  }
}

该按钮将在多个列上应用过滤器，这将产生数据被 color equals Blue AND brand equals Bmw.

过滤

编辑： 它对 boolean 的作用相同。

cars: {
  color: string;
  brand: string;
  enable: boolean;
}[];

filter(dt) {
  dt.filter('Blue', 'color', 'equals');
  dt.filter('Bmw', 'brand', 'equals');
  dt.filter(true, 'enable', 'equals');
}

在您粘贴的代码中，由于引号，'array[0].fieldName' 被视为文字，因此它会查找字段名称 "array[0].fieldName" 并且不会对其求值。

primeng Table 中自定义过滤布尔值的问题

Issues in custom filtering boolean value in primeng Table

typescript

primeng

angular

primeng-datatable