Angular 如何在离子2中进行分页？

我正在编写的应用程序有一个数千个项目的庞大列表，每个项目都有一个图像，可以为这个数据集创建一个寻呼机，但我不确定如何做到这一点。我试图在Ionion 2中实现这一点。如果我要滚动我的项目，它必须将数据发送到后端，就像page=1到10和page=10到20一样，我必须发送，他们会纠正它。

在HTML中输入以下代码：

<ion-content>

 <ion-list>
 <ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-content>

我希望它能对您有所帮助。

在爱奥尼亚3中分页

所有新闻HTML部分

 <ion-content >
      <ion-card *ngFor="let all of allNewsVar">
      <ion-list>
         <ion-item >{{all}}</ion-item>
      </ion-list>
      </ion-card>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

所有新闻服务TS文件部分

getAllNews(nextPageUrl){
  this.allNewsResponse = this.http.get(this.allNewsUrl+'?page='+nextPageUrl);
        return this.allNewsResponse;
    }

---

希望这对任何人都有帮助。

你的问题太笼统了。但我建议您同时使用

搜索栏

和

无限滚动

。从文档：

export class AllNewsPage {

  allNewsVar = [];
  pageno:any;

constructor( public searchService:SearchListService){
this.allNews();
this.pageno = 1;
}

allNews() {
    return this.searchService.getAllNews(this.pageno).subscribe(
        (res) => {
          let posts = res.data;
          for (let post of posts) {
            console.log(post);
            this.allNewsVar.push(post);
          }
        },
        (err) => {
          console.log(err);
        },
        () => console.log('done!')
    );
  }


doInfinite(infiniteScroll) {
    console.log('done!');
    let nextPageUrl = this.pageno++;
    console.log("next page:"+nextPageUrl);
    this.searchService.getAllNews(nextPageUrl).subscribe(
            data => {
          let posts=data.data;
          for(let post of posts){
             console.log(post);
            this.allNewsVar.push(post);
          }
        },
            err => {
          console.log(err);
        },
        () => console.log('Next Page Loading completed')
    );
    infiniteScroll.complete();
  }

getAllNews(nextPageUrl){
  this.allNewsResponse = this.http.get(this.allNewsUrl+'?page='+nextPageUrl);
        return this.allNewsResponse;
    }