角度分页，如何刷新页码？

Question

我试图在 Angular 中进行分页，以便我可以将正确的页码发送到 API。 于是我写了一个这样的代码；

.ts 文件包含这个；

pNum = 1;
page_number : number[] = [this.pNum, this.pNum+1, this.pNum+2] 
//With the help of this array, there will only be 3 pages shown out of hundreds, 
//but there will be previous and next page buttons

public pageSelected(selected) {
  if(selected == 'Previous')    //if prev is clicked, numbers will decrease by 1
     this.pNum--;
  else if(selected == 'Next')   //if next is clicked numbers will increase by 1
     this.pNum++;
  else
     this.pNum = selected;   //if a spesific number was selected, it will stay at the left side out of three numbers
}

然后在html文件中，我写了这段代码；

<ul class="pagination">
  <li class="page-item"><a class="page-link" (click)="pageSelected('Previous')>Previous</a></li>
  <li class="page-item" *ngFor="let i of page_number>
     <a class="page-link" (click)="pageSelected(i)"> {{i}} </a>
  </li>
  <li class="page-item"><a class="page-link" (click)="pageSelected('Next')>Next</a></li>
</ul>

现在的问题是，我可以正确获取页码，但是当我单击数字时，数字的顺序不会改变。 我想要的是例如当页码为 1 - 2 - 3 并且我点击了 2 时，它们应该会像 2 - 3 - 4 一样。或者当点击“下一步”按钮时，让页码增加 1。

我怎样才能做到这一点？

Answer 1

重新生成数组 page_number，为此您需要在代码中包含一个新的逻辑（在更改 pNum 之后）来决定重新生成视图页面是否正确或需要更改为上限或下限。

例如（伪代码）如果当前 page_number.last() == 3 和 pNum == 3 的当前值然后重新生成 page_number 数组，有很多方法可以进行分页，如果您选择这种方法，则有很多方法可以重新生成数组，例如，如果您选择可能的最后一页，那么您可以在循环中从最后到第一页计算新页，其中 (pNum + 1) 是您新的最后一个数字，然后计算任意页数直到第一页（在你的情况，3）。