如何过滤带有嵌套对象的 PrimeNG 表？答案

【问题标题】：How to filter a PrimeNG table with a nested object?如何过滤带有嵌套对象的 PrimeNG 表？
【发布时间】：2020-07-06 16:27:41
【问题描述】：

我想用未显示的字段过滤我的 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、name、age”。现在我正在像这样创建我的表：

<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 属性，则不会发生任何事情。如果我用“drink”过滤，它将显示所有条目。我尝试将actions.every() 添加到globalFilterField 输入属性，但这不起作用。

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

【问题讨论】：

标签： angular typescript primeng primeng-turbotable

【解决方案1】：

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

import { FilterUtils } from "primeng/utils";

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

然后你就可以使用它了：

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

【讨论】：