如何使用嵌套对象过滤PrimeNG表?

时间:2020-07-06 16:27:41

标签: angular typescript primeng primeng-turbotable

我想用未显示的字段过滤我的PrimeNG表。这是我的数据表对象:

[
  {
    id: 1,
    actions: [
      'eat',
      'drink',
      'sleep'
    ],
    name: 'test',
    age: 18
  },
  {
    id: 2,
    actions: [
      'eat',
    ],
    name: 'test1',
    age: 22
  },
  {
    id: 3,
    actions: [
      'drink',
      'sleep'
    ],
    name: 'test2',
    age: 19
  }
]

在我的表格中仅显示以下字段:“ id,姓名,年龄”。现在,我要像这样创建表:

<p-table #dt [value]="users" dataKey="id" styleClass="ui-table-users" [rowHover]="true"
         [rows]="50" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10, 25, 50, users.length]"
         [paginator]="true"
         [globalFilterFields]="['id', 'name', 'age']"> <-- HERE I WANT TO ADD THE ACTIONS
  <ng-template pTemplate="caption">
    Users
    <div class="ui-table-globalfilter-container">
      <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
    </div>
  </ng-template>
...

我不知道如何在此操作数组中进行过滤...如果我将“操作”添加到globalFilterField属性中,则什么也不会发生。如果我用“饮料”过滤,它将显示所有条目。我试图将actions.every()添加到globalFilterField输入属性中,但这不起作用。

有人知道如何过滤这样的PrimeNG表吗?我必须编写自己的过滤器吗?

1 个答案:

答案 0 :(得分:1)

您可以使用FilterUtils创建自定义过滤器

import { FilterUtils } from "primeng/utils";

//...
  ngOnInit() {
     FilterUtils["includes"] = (value, filter) => value.includes(filter);
    //...
  }

然后您可以使用它:

dt.filter(value, 'actions', 'includes')