Primeng p-table列过滤结合响应式表单数组失效问题

你的问题核心是没有保留原始数据源副本，每次过滤都直接修改了绑定的表单数组，导致清空搜索或逐字符删除时，无法从已过滤的子集还原完整数据。以下是具体修复方案，以及关于管道的建议：

一、核心修复思路：维护原始数据与显示数据分离 #

1. 保存原始数据副本
   在组件初始化时，把初始的数据源完整复制一份，作为过滤的基准，避免直接修改绑定的表单数组：

   import { FormBuilder, FormArray } from '@angular/forms';
   
   export class YourComponent {
     originalDataSource: any[]; // 原始数据副本
     tableFormArray: FormArray;
   
     constructor(private fb: FormBuilder) {}
   
     ngOnInit() {
       // 假设你的初始业务数据是initialData
       this.originalDataSource = [...initialData];
       // 基于原始数据构建表单数组
       this.tableFormArray = this.fb.array(
         this.originalDataSource.map(item => this.fb.group(item))
       );
     }
   }
   

2. 修正搜索过滤逻辑
   每次搜索都基于原始数据源过滤，再更新表单数组，而不是在已过滤的数组上二次过滤：

   handleSearch(searchValue: string) {
     const trimmedValue = searchValue.trim().toLowerCase();
     let filteredData: any[];
   
     if (trimmedValue) {
       // 根据你的搜索字段调整过滤条件，比如搜索name列
       filteredData = this.originalDataSource.filter(item => 
         item.name.toLowerCase().includes(trimmedValue)
       );
     } else {
       // 清空搜索时直接用原始数据
       filteredData = [...this.originalDataSource];
     }
   
     // 更新表单数组
     this.tableFormArray.clear();
     filteredData.forEach(item => this.tableFormArray.push(this.fb.group(item)));
   }
   

3. 模板绑定调整
   搜索框绑定输入事件，表格绑定表单数组的controls：

   <input 
     type="text" 
     (input)="handleSearch($event.target.value)" 
     placeholder="输入关键词搜索"
   >
   <p-table [value]="tableFormArray.controls">
     <!-- 列定义示例 -->
     <ng-template pTemplate="body" let-rowData>
       <tr>
         <td>{{ rowData.get('name')?.value }}</td>
         <!-- 其他列 -->
       </tr>
     </ng-template>
   </p-table>
   

二、关于是否使用管道的建议 #

不推荐用Angular管道实现这种场景：

• 纯管道只会在输入引用变化时触发，表单数组是复杂对象，内容变化时管道不会自动更新；
• 不纯管道虽然能触发更新，但会在每次变更检测时执行，大数据量下会有性能问题；
• 手动维护原始数据和显示数据的方式，逻辑更清晰，性能更可控，也更容易调试。

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