文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用角11的分页api

问如何使用角11的分页api
EN

Stack Overflow用户

提问于 2021-02-10 13:08:22

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

我正在编写一个棱角分明的客户端来使用分页api。我只需要实现next按钮。我怎么能这么做？

引脚表component.html

<tbody>
  <tr *ngFor="let e of lis ;">
    <td><b>{{e["name"]}}</b></td>
    <td><b>{{e["about"]}}</b></td>
    <td><b><a target="_blank" href='https://ipfs.io/ipfs/{{e["hash"]}}'>{{e["hash"]}}</a></b></td>
    <td><b>{{e["date"]}}</b></td>
  </tr>
</tbody>

引脚表组件ts

export class PinlistComponent implements OnInit {
  li:any;
  lis=[];
  constructor(private apiService: ApiService) { }
  ngOnInit(): void {
      this.apiService.getPins().subscribe((data)=>{
      console.log(data);
      this.li=data;
      this.lis=this.li.pins;
    });
  }
  
}

Api服务ts

  public getPins(){
    return this.httpClient.get(`https://openpinner.mycryptowebs.com:4000/`);
  }

服务器端分页将类似于

https://openpinner.mycryptowebs.com:4000/?page=1 (页变量为每页10个结果)

我只想实现一个下一个和前一个按钮。我怎么能这么做？所有的教程，我在互联网上看到的是一些插件或库，我不想使用任何那些，我只是想使用纯角。

angular

回答 1

Stack Overflow用户

发布于 2021-02-10 13:32:00

这应该能让你开始

ngOnInit(): void {
  this.apiService.getPins().subscribe((data)=>{
  console.log(data);
  this.li=data;
  this.lis=this.li.pins;
  this.pageNumber=data.pageNumber //You say the server is sending this out
});

改变你的服务。

 public getPins(pageNumber:number){
   const url = 'https://openpinner.mycryptowebs.com:4000/'
   if(pageNumber)
     url += '?page=pageNumber'
   return this.httpClient.get(url);

 }

你的下一个职能是：

private next(){
   const nextPage=this.pageNumber+1
   this.apiService.getPins(nextPage).subscribe((data)=>{
  //use the data
  })       
}

在您的html中：

<tbody>
  <tr *ngFor="let e of lis ;">
  <td><b>{{e["name"]}}</b></td>
  <td><b>{{e["about"]}}</b></td>
  <td><b><a target="_blank" href='https://ipfs.io/ipfs/{{e["hash"]}}'> 
  {{e["hash"]}}</a></b></td>
  <td><b>{{e["date"]}}</b></td>
 </tr>
 <button (click)="next()"></button>
</tbody>

票数 1

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

原文链接：

https://stackoverflow.com/questions/66137528

复制

相似问题

问如何使用角11的分页api
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角11的分页apiEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角11的分页api
EN