如何在PrimeNG表格中使用ng2 search filter 解决下拉筛选失效问题

问题根源 #

PrimeNG 的 <p-table> 组件本身会根据 [value] 绑定的数组自动遍历生成对应行数，你之前在 pTemplate="body" 模板内额外加了 *ngFor 遍历同一份数组，相当于双层循环，才会出现数据重复的问题。
你改用 let-pjt 语法修复重复问题后筛选失效，是因为原有的 ng2-search-filter 管道写在了被删掉的 *ngFor 语法上，过滤逻辑没有被执行。

解决方案 #

直接把过滤管道应用到 <p-table> 的 [value] 绑定上即可，不需要手动写 *ngFor，既不会触发重复渲染，也能正常实现筛选效果。

修改后的代码示例

仅需要调整 <p-table> 的 [value] 属性，其余代码保持你现有写法即可：

<p-table 
  [value]="projects | filter:project.rank | filter:project.business_divition | filter:project.in_charge_area | filter:project.customer_area | filter:project.in_charge_pm | filter:project.in_charge_pl | filter:project.sales_in_charge | filter:project.updated_by | filter:project.customer_name"
  styleClass="p-datatable-gridlines" 
  responsiveLayout="scroll" 
  scrollHeight="17.8vw"
>
  <!-- 其余header、body模板代码完全保留你当前的写法即可，不需要改动 -->
  <ng-template pTemplate="header">
    <!-- 原有表头代码 -->
  </ng-template>
  <ng-template pTemplate="body" let-pjt> 
    <!-- 原有单元格、按钮代码 -->
  </ng-template>
</p-table>

补充说明 #

因为你的下拉框已经用 [(ngModel)] 双向绑定了筛选条件，条件变更时管道会自动重新计算过滤结果，表格会同步更新展示符合条件的数据，不需要额外写事件监听逻辑。

如果后续遇到过滤性能问题，可以把过滤逻辑移到组件类中，监听下拉框的 onChange 事件手动过滤后赋值给新变量，再把新变量绑定到 [value] 即可。

内容的提问来源于stack exchange，提问作者user16558324