Angular 4分页异常：数组元素全部显示在单页问题求助

这种分页失效的情况大概率是分页逻辑的计算环节出了问题，尤其是总页数、每页条数的计算，或者参数传递环节有疏漏。结合你提到的场景（刚好是每页条数整数倍的数组长度都出问题），咱们一步步拆解排查：

一、先排查PagerService的核心计算逻辑 #

你只贴了getPage的开头，我先给出标准的分页实现逻辑，你可以对比自己的代码找差异：

import { Injectable } from '@angular/core';
import * as _ from 'underscore';

@Injectable()
export class PagerService {
  constructor() { }

  getPage(items: any[], page: number, pageSize: number = 10) {
    const totalItems = items.length;
    // 重点：总页数必须用Math.ceil，确保有余数时自动进1；如果用Math.floor，整数倍的总条数不会出错，但非整数倍会少算一页
    const totalPages = Math.ceil(totalItems / pageSize);

    // 处理页码边界：防止页码超出有效范围
    if (page < 1) page = 1;
    else if (page > totalPages) page = totalPages;

    // 计算当前页数据的切片索引
    const startIndex = (page - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, totalItems);

    // 用underscore切片获取当前页数据
    const currentPageItems = _.slice(items, startIndex, endIndex);

    return {
      totalItems,
      currentPage: page,
      pageSize,
      totalPages,
      items: currentPageItems
    };
  }
}

你需要检查自己的代码有没有这些问题：

• 是不是用了Math.floor()计算总页数？虽然整数倍的数组长度（比如40/10）用floor也能得到4，但如果你的pageSize被误设成了远大于数组长度的值（比如默认是100），那40/100=0.4，floor后是0，后续逻辑可能会把总页数强制设为1。
• 有没有正确处理页码的边界值？比如当page为0或者负数时，有没有重置为1？
• 切片的startIndex和endIndex计算是否正确？如果startIndex一直是0，那自然会返回所有数据。

二、检查组件中调用PagerService的参数传递 #

很多时候问题出在组件调用环节，比如：

// 示例组件代码
import { PagerService } from './pager.service';

export class YourComponent {
  allItems: any[];
  pagedItems: any[];
  pagerInfo: any = {};

  constructor(private pagerService: PagerService) {
    // 模拟你的40条数据
    this.allItems = Array(40).fill({ id: 1, name: '测试数据' });
    // 这里要确保pageSize传递正确！比如你要每页10条，就传10
    this.setCurrentPage(1, 10);
  }

  setCurrentPage(page: number, pageSize: number = 10) {
    this.pagerInfo = this.pagerService.getPage(this.allItems, page, pageSize);
    this.pagedItems = this.pagerInfo.items;
  }
}

需要确认：

• 调用getPage时，pageSize是不是你预期的值？比如如果默认值设成了50，那40条数据自然只显示1页。
• 分页按钮点击时，有没有正确传递新的页码给setCurrentPage？比如按钮绑定的是不是(click)="setCurrentPage(2)"这类正确的逻辑，而不是一直传1。

三、检查模板渲染的分页控制部分 #

最后看看模板里的分页按钮是不是正确使用了totalPages这个参数：

<!-- 示例分页模板 -->
<ul class="pagination">
  <li [class.disabled]="pagerInfo.currentPage === 1">
    <a (click)="setCurrentPage(1)">首页</a>
  </li>
  <li [class.disabled]="pagerInfo.currentPage === 1">
    <a (click)="setCurrentPage(pagerInfo.currentPage - 1)">上一页</a>
  </li>
  <!-- 这里要遍历的是总页数对应的页码列表，而不是固定值 -->
  <li *ngFor="let page of Array(pagerInfo.totalPages).fill(0).map((x, i) => i + 1)" 
      [class.active]="page === pagerInfo.currentPage">
    <a (click)="setCurrentPage(page)">{{page}}</a>
  </li>
  <li [class.disabled]="pagerInfo.currentPage === pagerInfo.totalPages">
    <a (click)="setCurrentPage(pagerInfo.currentPage + 1)">下一页</a>
  </li>
  <li [class.disabled]="pagerInfo.currentPage === pagerInfo.totalPages">
    <a (click)="setCurrentPage(pagerInfo.totalPages)">末页</a>
  </li>
</ul>

如果模板里错误地固定了页码数量，或者没有根据totalPages动态生成按钮，就会出现只显示1页的情况。

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