Angular项目中ngx-pagination分页导航失效问题求助

针对你遇到的分页导航仅显示1页、按钮失效问题，按以下步骤排查修复：

1. 确认API返回数据格式与组件接收逻辑 #

ngx-pagination依赖总记录数计算分页数量，首先检查ASP.NET Core API返回的数据是否包含准确的总条数：

• 确保API返回结构类似：

  {
    "transactionList": [/* 当前页数据 */],
    "totalCount": 120 // 所有符合条件的记录总数
  }
  

• 组件中需将totalCount赋值给绑定分页控件的totalItems变量：

  // 组件类
  totalItems: number = 0;
  currentPage: number = 1;
  pageSize: number = 10;
  
  loadTransactions() {
    this.transactionService.getTransactions(this.currentPage, this.pageSize, this.dateFilter)
      .subscribe(res => {
        this.transactionList = res.transactionList;
        this.totalItems = res.totalCount; // 关键：赋值总条数
      });
  }
  

2. 检查模板中分页控件的绑定 #

确保分页控件的参数和事件绑定正确：

<!-- 模板中的分页控件 -->
<pagination-controls 
  (pageChange)="pageChanged($event)" 
  [totalItems]="totalItems"
  [itemsPerPage]="pageSize"
  maxSize="5"
  directionLinks="true"
  autoHide="false"
></pagination-controls>

• 必须绑定totalItems到总记录数，itemsPerPage要和API请求的每页条数一致
• pageChange事件必须绑定处理函数，触发新页面数据加载

3. 修复分页切换逻辑 #

在pageChanged方法中更新当前页并重新请求数据：

pageChanged(pageNum: number) {
  this.currentPage = pageNum;
  this.loadTransactions(); // 重新调用API加载对应页数据
}

注意：ASP.NET Core的分页通常用Skip((pageIndex-1)*pageSize).Take(pageSize)，如果API接收从0开始的页码，要把pageNum-1传递给API。

4. 排查筛选/查询与分页的兼容问题 #

如果使用日期筛选或查询条件，分页时需将这些参数一并传递给API，否则会导致总记录数计算错误：

loadTransactions() {
  const params = {
    page: this.currentPage,
    pageSize: this.pageSize,
    startDate: this.dateFilter.start,
    endDate: this.dateFilter.end,
    keyword: this.searchKeyword
  };
  this.transactionService.getTransactions(params)
    .subscribe(res => {
      this.transactionList = res.transactionList;
      this.totalItems = res.totalCount;
    });
}

5. 检查依赖版本与配置 #

• 确保ngx-pagination版本与Angular版本兼容（比如Angular 16+对应ngx-pagination 6.x+）
• 避免将maxSize设为1，这会强制只显示1页导航

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