Angular分页中如何仅显示当前页码？

• 确认分页核心参数绑定正确性
  首先检查currentPage和totalItems（或对应总页数的参数）的绑定是否准确。以常用的ngx-bootstrap分页组件为例，确保模板中参数绑定无误：

  <pagination-controls
    [currentPage]="config.currentPage"
    [totalItems]="totalItems"
    [maxSize]="1"
    [directionLinks]="true"
  ></pagination-controls>
  

  这里totalItems必须是数据总条数，组件会自动计算总页数。如果误将总页数传给totalItems，或是currentPage的绑定对象出错，会直接导致页码计算异常，出现显示最后一页的情况。

• 修正maxSize配置的理解与使用
  maxSize控制的是页码栏显示的页码数量，当设为1时，组件本应显示当前页，但总页数计算错误会导致显示偏差。如果只想保留当前页+前后导航，需确保：

  • boundaryLinks保持默认的false，避免显示首尾页码
  • 若使用其他分页组件库，核对文档中maxSize的定义，确保配置逻辑符合预期。

• 排查组件版本问题
  部分旧版本的分页组件在maxSize取值较小时存在显示bug，建议升级到对应组件的稳定版本后重新测试。

• 自定义页码模板兜底
  若上述方法无效，可通过自定义模板强制只显示当前页：

  <pagination-controls [directionLinks]="true">
    <ng-template pTemplate="page" let-page>
      <span *ngIf="page === config.currentPage">{{page}}</span>
    </ng-template>
  </pagination-controls>
  

  此方式会仅渲染当前页的页码，配合前后导航链接，即可实现“<< previous 2 next >>”的预期效果。

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