Angular13中ngx-pagination切换页码后搜索筛选Pipe失效问题

在Angular 13项目中，使用自定义Filter Pipe结合ngx-pagination（版本^5.1.1）实现表格的搜索分页功能时，出现以下问题：处于第一页时搜索筛选正常，但切换到第二页后进行搜索，筛选功能失效，表格数据显示空白。

相关代码 #

自定义Filter Pipe #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
  
    return items.filter(item => {
      return Object.keys(item).some(key => {
        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
      });
    });
   }
}

页面HTML代码 #

<input type="search" class="col-sm-3.1 m_left16" id="searchAll" [(ngModel)]="searchAllDataBenchmark"
                                        placeholder="Search by keywords" autocomplete="off">

<tr *ngFor="let i of userArray2 | filter: searchAllDataBenchmark | paginate: { itemsPerPage: count, currentPage: p } ">
  <!-- 表格内容 -->
</tr>

<pagination-controls (pageChange)="p = $event"></pagination-controls>

问题原因 #

核心问题是分页状态没有随搜索操作重置：当切换到第二页后，分页控件的currentPage参数（即变量p）的值为2，此时执行搜索，Filter Pipe会先过滤出符合条件的数据集，但分页插件依然尝试从这个过滤后的数据集的第2页取数据。如果过滤后的总数据量小于单页显示条数，第2页就没有数据，导致表格空白。

解决方法 #

每次搜索关键词变化时，强制将当前页码重置为1，确保分页插件从过滤后的数据集的第一页开始加载数据。

方案1：通过ngModelChange直接重置页码 #

修改input标签，添加(ngModelChange)事件监听：

<input type="search" class="col-sm-3.1 m_left16" id="searchAll" 
       [(ngModel)]="searchAllDataBenchmark"
       (ngModelChange)="p = 1"
       placeholder="Search by keywords" autocomplete="off">

方案2：封装方法处理搜索变化（适合复杂逻辑） #

在组件类中添加处理方法：

// 组件类代码片段
export class YourComponent {
  searchAllDataBenchmark = '';
  p = 1;
  count = 10;
  userArray2 = [];

  // 搜索关键词变化时重置页码
  resetPageOnSearch() {
    this.p = 1;
    // 若有其他搜索相关逻辑，可在此添加
  }
}

然后修改HTML绑定该方法：

<input type="search" class="col-sm-3.1 m_left16" id="searchAll" 
       [(ngModel)]="searchAllDataBenchmark"
       (ngModelChange)="resetPageOnSearch()"
       placeholder="Search by keywords" autocomplete="off">

这样修改后，无论当前处于哪一页，只要触发搜索，都会自动回到第一页显示过滤后的结果，不会再出现空白的情况。

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