ค้นหาเว็บไซต์

angular - วิธีกรองตาราง PrimeNG ที่มีวัตถุซ้อน?


ฉันต้องการกรองตาราง 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>
...

ฉันไม่รู้วิธีกรองในอาเรย์การกระทำนี้... ถ้าฉันเพิ่ม 'actions' ลงในคุณสมบัติ globalFilterField จะไม่มีอะไรเกิดขึ้น ถ้าฉันกรองด้วย "drink" มันจะแสดงทุกรายการ ฉันลองเพิ่ม actions.every() ลงในคุณสมบัติ input ของ globalFilterField แต่ไม่สำเร็จ

มีใครรู้วิธีกรองตาราง PrimeNG แบบนี้ไหม? ฉันต้องเขียนตัวกรองเองหรือเปล่า?

คำตอบ #1

คุณสามารถสร้างตัวกรองแบบกำหนดเองโดยใช้ FilterUtils

import { FilterUtils } from "primeng/utils";

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

แล้วคุณก็สามารถใช้มันได้:

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