Angular 13分页异常：预期最后页码为2却显示为3

问题说明 #

Angular 13项目实现分页功能时，前端分页控件显示最后一页为3，但实际总页数应为2。测试Web API返回的pager数据明确显示numberOfPages=2、totalRecords=6，总页数确实是2，但分页控件渲染错误。

API返回数据 #

请求地址：https://localhost:7235/api/items?pageNumber=0

{
    "items": [
        {
            "id": 3,
            "itemNameER": "قلم",
            "itemNameEN": "pen",
            "description": "1"
        },
        {
            "id": 4,
            "itemNameER": "قلم",
            "itemNameEN": "pencil",
            "description": null
        },
        {
            "id": 5,
            "itemNameER": "قلم",
            "itemNameEN": "pen2",
            "description": null
        },
        {
            "id": 8,
            "itemNameER": "car",
            "itemNameEN": "car",
            "description": "1"
        },
        {
            "id": 9,
            "itemNameER": "mobile",
            "itemNameEN": "mobile",
            "description": "1"
        }
    ],
    "pager": {
        "numberOfPages": 2,
        "currentPage": 1,
        "totalRecords": 6
    }
}

前端代码 #

component.html #

<table id="customers">
  <tr>
    <th>Id</th>
    <th>ItemNameAR</th>
    <th>ItemNameEN</th>
    <th>Description</th>
  </tr>
  <tr 
    *ngFor="
      let item of items
        | paginate
          : {
              itemsPerPage: pager?.numberOfPages,
              currentPage: pager?.currentPage,
              totalItems: pager?.totalRecords
            }
    "
  >
  <td>{{item.id}}</td>
  <td>{{item.itemNameAR}}</td>
  <td>{{item.itemNameEN}}</td>
  <td>{{item.description}}</td>
  </tr>
</table>

<pagination-controls
  previousLabel="Prev"
  nextLabel="Next"
  [responsive]="true"
  (pageChange)="onPageChanged($event)" 
></pagination-controls>

component.ts #

export class ItemsComponent implements OnInit {
  items?: ItemsData[] | undefined;
  pager:any;
  currentItem = null;
  pageNumber:number=1;
  constructor(private erpservice:ErpServiceService) { }

  ngOnInit(): void {
    this.retrieveAllItems();
  }
  onPageChanged(pageNumber: number) {
    this.retrieveAllItems(pageNumber);
  }
  
  retrieveAllItems(pageNumber: number = 0): void {
    this.erpservice.getAll(pageNumber)
      .subscribe(
        data => {
        this.items=data.items;
        this.pager=data.pager;
        console.log(this.pager);
        },
        error => {
          console.log(error);
        });
  }

}

services.ts #

getAll(pageNumber: number): Observable<DataWrapper> {
    let params = new HttpParams();

    if (pageNumber)
      params = params.append('pageNumber', pageNumber);

    let httpOptions = {
        params: params
    };
    return this.http.get<DataWrapper>(baseUrl,httpOptions);
  }

模型定义 #

export interface ItemsData {
    id:number;
    itemNameER:string;
    itemNameAR:string;
    itemNameEN:string;
    description:string;
}
export interface DataWrapper {
    items: ItemsData[];
    pager:Pager;
}

export interface Pager {
    numberOfPages:number;
    currentPage:number;
    totalRecords:number;
}

问题截图 #

问题原因与修复方案 #

核心问题 #

分页管道paginate的itemsPerPage参数被错误绑定为pager?.numberOfPages（总页数），而该参数实际需要的是每页显示的记录条数。

根据API返回的totalRecords=6和numberOfPages=2，可算出每页应显示3条数据（6/2=3），但当前代码把itemsPerPage设为2，导致分页控件计算总页数为6/2=3，从而错误显示3页。

修复步骤 #

1. 在组件中添加itemsPerPage变量，用于存储每页显示条数：

export class ItemsComponent implements OnInit {
  items?: ItemsData[] | undefined;
  pager:any;
  currentItem = null;
  pageNumber:number=1;
  itemsPerPage: number; // 新增变量
  constructor(private erpservice:ErpServiceService) { }

  // ... 其他代码

  retrieveAllItems(pageNumber: number = 0): void {
    this.erpservice.getAll(pageNumber)
      .subscribe(
        data => {
        this.items=data.items;
        this.pager=data.pager;
        // 计算每页显示条数
        this.itemsPerPage = this.pager.totalRecords / this.pager.numberOfPages;
        console.log(this.pager);
        },
        error => {
          console.log(error);
        });
  }
}

2. 修改component.html中paginate管道的参数，将itemsPerPage绑定到新变量：

<tr 
  *ngFor="
    let item of items
      | paginate
        : {
            itemsPerPage: itemsPerPage,
            currentPage: pager?.currentPage,
            totalItems: pager?.totalRecords
          }
"
>

3. 额外修正：页码索引不一致问题
   API接收的pageNumber是0-based（从0开始），但ngx-pagination的pageChange事件返回的是1-based页码（从1开始），因此需要在onPageChanged方法中转换页码：

onPageChanged(pageNumber: number) {
  // 转换为0-based页码传给API
  this.retrieveAllItems(pageNumber - 1);
}

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