角度分頁，如何刷新頁碼？

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）。