ngx-pagination自定义模板结合筛选Pipe后分页功能失效求助

我来帮你排查这个问题，核心是你的分页配置没有和筛选后的数据集联动，再加上几个细节配置错误，导致分页控件状态混乱、点击无响应。咱们一步步修复：

问题根源拆解 #

1. 分页总数量用了原始数据长度：你的getPaginationOptions里totalItems取的是this.draftRecords.length（原始未筛选数据），但筛选后数据量已经变化了，分页控件还按原始数量计算，自然会出现"显示全部筛选数据、分页控件状态不对"的问题。
2. 分页ID不匹配：你在onChangePage里用tab${this.tabIndex}作为分页状态的键，但getPaginationOptions里的id写死成了'tab'，导致分页控件无法正确关联对应的分页状态，点击分页按钮当然没反应。
3. 重复调用Pipe导致性能&一致性问题：模板里多次调用filteredDraftRecords | draftFilter:draftFilterArg，不仅重复执行筛选逻辑影响性能，还可能因变更检测时机问题出现数据不一致。
4. currentPage未初始化：如果this.page[paginationId]没有初始值，分页控件会默认用undefined，导致初始状态异常。

分步修复代码 #

1. 重构组件：在组件内维护筛选结果（替代模板Pipe） #

先把筛选逻辑从模板Pipe移到组件内，避免重复计算，同时让分页能直接拿到筛选后的数据集：

// Component ts 代码修改
export class TaskManagerComponent implements OnInit {
  draftRecords = new Array<RecordViewModel>();
  filteredDraftRecords = new Array<RecordViewModel>();
  motionStatus = MotionStatus;
  // 改成私有变量+getter/setter，自动更新筛选结果
  private _draftFilterArg = 0;
  tabIndex = 0;
  page: { [id: string]: number} = {};

  constructor(public taskManagerService: TaskManagerService) {
    // 初始化分页默认页
    this.page[`tab${this.tabIndex}`] = 1;
  }

  ngOnInit(): void {
    this.loadDraftRecords();
  }

  loadDraftRecords(): void {
    this.taskManagerService.getDraftMotions().subscribe(m => {
      this.draftRecords = m.Records;
      // 初始加载时执行一次筛选
      this.filteredDraftRecords = this.draftRecords.filter(item => item.status.id === this._draftFilterArg);
    });
  }

  // 用setter自动更新筛选结果
  set draftFilterArg(value: number) {
    this._draftFilterArg = value;
    this.filteredDraftRecords = this.draftRecords.filter(item => item.status.id === value);
    // 筛选后重置当前页到第一页（可选，提升用户体验）
    this.page[`tab${this.tabIndex}`] = 1;
  }

  get draftFilterArg(): number {
    return this._draftFilterArg;
  }

  // 修正分页配置
  getPaginationOptions(tabIndex: number): PaginationOptions {
    const paginationId = `tab${tabIndex}`;
    return {
      id: paginationId, // 用唯一的分页ID，和onChangePage里的键对应
      itemsPerPage: 10,
      currentPage: this.page[paginationId] || 1, // 确保有默认值
      totalItems: this.filteredDraftRecords.length // 用筛选后的总数量！
    };
  }

  onChangePage(pageNumber) {
    this.page[`tab${this.tabIndex}`] = pageNumber;
  }
}

2. 简化模板：移除重复Pipe调用 #

现在模板可以直接用组件内维护的filteredDraftRecords，不需要再调用Pipe：

<!-- Component HTML 代码修改 -->
<task-manager-record *ngFor="let record of filteredDraftRecords | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></task-manager-record>

<div class="totalRecords">
  <label>Total </label>
  {{ filteredDraftRecords.length }}
</div>

<pagination 
  *ngIf="filteredDraftRecords.length > getPaginationOptions(tabIndex).itemsPerPage" 
  (pageChange)="onChangePage($event)" 
  [options]="getPaginationOptions(tabIndex)"
>
</pagination>

3. 可选：优化Pipe（如果坚持要用模板Pipe） #

如果不想把筛选逻辑移到组件内，至少要修正分页的totalItems为筛选后的数据长度，同时确保分页ID匹配：

// 修改getPaginationOptions
getPaginationOptions(tabIndex: number): PaginationOptions {
  const paginationId = `tab${tabIndex}`;
  // 手动计算筛选后的数据长度
  const filteredCount = this.draftRecords.filter(item => item.status.id === this.draftFilterArg).length;
  return {
    id: paginationId,
    itemsPerPage: 10,
    currentPage: this.page[paginationId] || 1,
    totalItems: filteredCount
  };
}

但这种方式还是会重复计算筛选逻辑，不如组件内维护筛选结果高效。

修复后的效果 #

• 筛选后分页控件会根据筛选后的总数据量自动更新状态
• 每页严格显示10条数据，不足10条时分页控件自动隐藏
• 分页按钮点击正常，能切换对应页面
• 避免了重复执行筛选逻辑，提升了页面性能

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