Angular 如何在角度分页中仅显示10个页码以及第一个和最后一个按钮

我试图只显示10个页码，包括第一个和最后一个按钮，而不是所有可能的按钮

我的代码：

<nav aria-label="...">
    <ul style="margin-left: 180px;margin-top:-10px;" class="pagination"  *ngIf="phoneNumberPage?.content" >
      <li *ngFor="let page of ' '.repeat(phoneNumberPage.totalPages).split(''), let i = index " (click)="getPageClient(i)" [class.active]="i === selectedPage" class="page-item"><a class="page-link" href="#">{{i}}</a></li>
    </ul>
  </nav>

我应该做什么更改使其看起来像：

  First 1 2 3 4 5...Last

---

如果您想创建自己的分页器，似乎有很多工作要做。我不会为您编写完成的代码，但我可以添加一些指针来帮助您继续

首先，您可以硬编码

First

和

Last

按钮，还可以添加一些显示条件（例如，如果您在第一页，则不显示

First

）

您可以向锚定标记添加条件（例如，

），当然，您需要根据用户所在的页面向显示条件添加额外的逻辑。也许您可以在组件中存储一个额外的变量：

currentPage

，然后从currentPage启动*ngFor

  First 1 2 3 4 5...Last