ngb-pagination清除筛选后无法重置至第1页问题求助

清除筛选后明明把页码重置成1了，分页组件却还高亮之前的页码？试试下面这几个实用解法：

1. 手动触发变更检测 #

如果Angular没自动识别到page变量的变化（比如组件用了OnPush变更检测策略），直接手动触发就行：

• 先注入ChangeDetectorRef，重置页码后调用detectChanges()强制组件更新状态。

修改后的TS代码：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'ngbd-pagination-basic',
  templateUrl: './pagination-basic.html',
})
export class NgbdPaginationBasic {
  page = 1;
  collectionSize = 70; // 注意：这个值要和当前数据总条数同步，别硬编码！

  constructor(private cdr: ChangeDetectorRef) {}

  resetPage() {
    // 先执行清除筛选、加载全量数据的逻辑
    // ...你的数据加载代码...

    // 重置页码
    this.page = 1;
    // 更新总条数为清除筛选后的真实数据量
    this.collectionSize = 你的全量数据.length;
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

2. 别硬编码collectionSize #

原来代码里collectionSize写死成70是核心坑之一：筛选后数据总条数减少，分页组件的页码范围会自动调整；但清除筛选后如果不把collectionSize更新回真实的全量数据条数，分页组件的内部状态会混乱，导致高亮页码不对。一定要让这个值和当前数据的总条数动态绑定。

3. 异步时机问题用setTimeout兜底 #

如果是数据加载和页码重置的异步顺序搞混了（比如数据还没加载完就重置了页码），可以用setTimeout把页码重置放到下一个变更周期：

resetPage() {
  // 模拟异步加载全量数据
  this.loadClearFilterData().then(() => {
    setTimeout(() => {
      this.page = 1;
      this.collectionSize = 你的全量数据.length;
    }, 0);
  });
}

4. 拆解双向绑定（可选） #

如果双向绑定[(page)]="page"出现异常，拆成单向绑定加事件监听，手动控制页码：
HTML代码：

<ngb-pagination 
  [collectionSize]="collectionSize" 
  [page]="page" 
  (pageChange)="onPageChange($event)" 
  aria-label="Default pagination">
</ngb-pagination>

TS代码：

onPageChange(newPage: number) {
  this.page = newPage;
  // 加载对应页码的数据
}

resetPage() {
  // 加载全量数据
  this.page = 1;
  this.collectionSize = 你的全量数据.length;
}

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