文章/答案/技术大牛

发布

社区首页 >问答首页 >分页角度，如何刷新页码？

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

Stack Overflow用户

提问于 2020-09-15 07:48:52

回答 1查看 173关注 0票数 1

我试图在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。

我该怎么做呢？

html

angular

typescript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-15 08:12:15

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63893191

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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