イオン2でページ番号付けを行う方法は？

Question

私が書いているアプリには、数千項目の膨大なリストがあり、それぞれにこのデータセットのページャーを作成するイメージがありますが、これを行う方法はわかりません。私はイオン2でこれを実装しようとしています。私が項目をスクロールしようとしている場合、データをバックエンドに送る必要があります。例えば、ページ= 1から10、ページ= 10から20です。それ。あなたのHTMLにコードの下に置く

Answer 1

：あなたのクラスファイル内

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

以下に置く：

 doInfinite(infiniteScroll) { 

    let nextpage=this.pageno++; 
    console.log("next page:"+nextpage) 
    this.YourService.Your method(nextpage).subscribe(
      data => { 
       let posts=data.data; 
       for(let post of posts){ 
        // console.log(post); 
        this.posts.push(post); 
       } 

      }, 
      err => { 
       console.log(err); 
      }, 
      () => console.log('Next Page Loading completed') 
     ); 
    infiniteScroll.complete(); 
} 

を、私はそれはあなたを助けることを願っています。

Answer 2

IONIC 3の改ページ

すべてのニュースHTML PART

<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ファイルPART

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(); 
    } 

すべてのニュースサービスTSファイルのパート

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

HOPE THISヘルプY ONE。