Как сделать разбиение на страницы в ионных 2?

Question

Приложение, которое я пишу, содержит массивный список из нескольких тысяч элементов, каждый из которых имеет изображение для создания пейджера для этого набора данных, но я не уверен, как это сделать. Я пытаюсь реализовать это в ионном 2. Если я собираюсь прокрутить мои объекты, он должен отправить данные обратно, например, если страница = 1 - 10 и страница = от 10 до 20, как это я должен отправить, и они будут исправлять Это.

Answer 1

положить ниже код в ваш 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> 

в файле класса поместить ниже:

 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

PAGINATION в ион- 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 FILE Часть

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

НАДЕЖДА НАСТОЯЩЕГО ПОМОГАЕТ Y ONE.