如何在 Global Search PrimeNg 表 Angular 中搜索管道数据？答案

【问题标题】：How to search piped data in Global Search PrimeNg table Angular?如何在 Global Search PrimeNg 表 Angular 中搜索管道数据？
【发布时间】：2022-06-14 19:26:40
【问题描述】：

我们有一个表，我已经管道了一列。但是当我搜索时，它搜索实际数据，管道数据未显示在表中。全球搜索：

 <p-table [globalFilterFields]="['value']"  [responsive]="true" responsiveLayout="stack"  (onFilter)="handleFilter($event)"  styleClass="p-datatable-gridlines"  editMode="row"  #dt  [exportHeader]="'customExportHeader'"  [(selection)]="selectedProducts"   rowGroupMode="rowspan" groupRowsBy="dateOfRelease" sortField="dateOfRelease"   dataKey="ldId"  [columns]="cols"    [showCurrentPageReport]="true"  sortMode="multiple" [value]="formatData"   (sortFunction)="customSort($event)"
        [rows]="10" [paginator]="true" (selectionChange)="onSelectionChange($event)"   [loading]="loading" >

//全局搜索代码：

<input pInputText type="text"   (input)="dt.filterGlobal($any($event.target).value,'contains')" (onChange)="onwireVersionChange($event)"  placeholder="Global Search" />
    
//Custom Method for global filter:
   

 public prepareFilters(): void {
            this.wireVersionFilters=[];
            this.formatData.forEach((filtered)=>{
              console.log("Filtered",filtered)
              const wireVersionFilter: DataFilter = {value:filtered.value, label:new WireVersionPipe().transform(filtered.value)};
              this.wireVersionFilters.findIndex(current => current.value === wireVersionFilter.value) === -1 ? this.wireVersionFilters.push(wireVersionFilter) : null;
        
            })
          }
      
      public onwireVersionChange(event:any) {
        const selectedValues = event.value.map((datatableFilter:any) => datatableFilter.value);
        this.table.filter(selectedValues, 'wireVersion', 'in');
      }

【问题讨论】：

标签： angular datatable primeng primeng-datatable

【解决方案1】：

我将这个演示放在 Stackblitz 上，以解决我遇到的同样问题。您需要有一个自定义过滤器选项来处理对原始数据的搜索，该选项将按照您对显示进行过滤的方式对其进行过滤，以便找到匹配项。

StackBlitz Demo

【讨论】：