Angular-14中ngx-bootstrap-pagination分页功能异常修复求助

1. 前端分页参数传递校验 #

首先确认组件内的分页参数是否在事件触发时正确更新并传递给后端：

• 给分页控件的pageChanged事件和每页条数切换事件绑定正确的处理逻辑，确保currentPage和itemsPerPage实时更新：

pageChanged(event: PageChangedEvent): void {
  this.currentPage = event.page;
  this.reloadData();
}

onPageSizeChange(): void {
  this.currentPage = 1; // 切换每页条数时重置页码到第一页
  this.reloadData();
}

• 检查reloadData()方法中，是否将最新的currentPage和itemsPerPage作为参数传给后端服务，而非固定的初始值：

reloadData(): void {
  this.yourDataService.getList(this.currentPage, this.itemsPerPage)
    .subscribe(res => {
      this.dataList = res.items;
      this.totalItems = res.totalItems;
    });
}

2. ngx-bootstrap-pagination组件绑定校验 #

确保HTML中的分页控件绑定正确：

• [(ngModel)]="currentPage"必须正确绑定组件内的页码变量，不然点击页码无法同步更新；
• totalItems要绑定后端返回的真实总数据条数，不能写固定值，否则分页控件的页码数量计算错误；
• itemsPerPage需与组件内的每页条数变量双向绑定，保证控件显示和请求参数一致。
  示例代码：

<pagination 
  [(ngModel)]="currentPage"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
  (pageChanged)="pageChanged($event)"
  [maxSize]="5"
  [boundaryLinks]="true">
</pagination>

<select [(ngModel)]="itemsPerPage" (change)="onPageSizeChange()">
  <option value="10">10条/页</option>
  <option value="20">20条/页</option>
</select>

3. 后端参数接收与分页逻辑校验 #

检查ASP.NET Core后端的分页逻辑是否正确：

• 确认接口接收的分页参数名称和前端传递的一致（比如前端传page和pageSize，后端不能用currentPage或其他名称）；
• 分页查询时必须用(page - 1) * pageSize计算跳过的条数，直接用page * pageSize会导致永远取第一页数据：

[HttpGet]
public async Task<IActionResult> GetList(int page = 1, int pageSize = 10)
{
    var totalCount = await _dbContext.YourEntities.CountAsync();
    var dataList = await _dbContext.YourEntities
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .ToListAsync();
    return Ok(new { totalItems = totalCount, items = dataList });
}

4. 网络请求与数据校验 #

• 打开浏览器控制台的Network标签，查看每次分页请求的Query参数，确认page和pageSize是否随操作变化（比如点击第2页时，参数应为page=2而非始终page=1）；
• 检查后端返回的JSON中totalItems是否为真实总条数，若总条数小于等于每页条数，分页控件不会生成多页按钮。

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