Ionic 2：無限滾動無法正常工作

Question

我試圖將無限滾動到我的應用程序，它從https://developer.yummly.com/documentation提取數據。有一個最大結果值，當前設置爲50。每次到達滾動點時，我都希望它以相同的數量增加。

我的API調用從這裏開始

perpage: number = 50; 

loadCategory(category:any, start:number=0) { 
    var url = "http://api.yummly.com/v1/api/recipes?_app_id=...&_app_key=..."; 

    if (categoryCache[category.categoryId]) { 
     // already loaded data 
     return Promise.resolve(categoryCache[category.categoryId]); 
    } 

    // don't have the data yet 
    return new Promise(resolve => { 
     // We're using Angular HTTP provider to request the data, 
     // then on the response, it'll map the JSON data to a parsed JS object. 
     // Next, we process the data and resolve the promise with the new data. 
     var params = ""; 

     category.apiParams.forEach(paramPair => { 
     params += "&" + paramPair.key + '=' + paramPair.value; 
     }); 

     this.http.get(url + params + "&maxResult=" + this.perpage + "&start=" + start) 
     .map(res => res.json()) 
     .subscribe(data => { 
      // we've got back the raw data, now generate the core schedule data 
      // and save the data for later reference 
      console.log(data); 
      console.log(this.http.get); 
      categoryCache[category.categoryId] = data.matches; 
      resolve(categoryCache[category.categoryId]); 
     }); 
    }); 
} 

，然後我的網頁.ts文件

public api: any = []; 
    private start:number=50; 

    loadRecipes(){ 
    return new Promise(resolve => { 
     this.apiAuthentication.loadCategory(this.navParams.data) 
     .then(data => { 
     this.api = data; 
     }); 
    }) 
    } 


    doInfinite(infiniteScroll:any) { 

    setTimeout(() => { 
     // Text goes here 
     this.start = 100; 
     infiniteScroll.complete(); 
    }, 500); 
    } 

如果有人可以幫助將是巨大的。

Answer 1

您必須在doinfinite()之內致電loadRecipies。
爲了您pagenation，改變loadRecipies到：

api:any[]=[];//initialize to empty array 
loadRecipes(scroll?:any,start?:any){ 
    return new Promise(resolve => { 
     this.apiAuthentication.loadCategory(this.navParams.data,start) 
     .then(data => { 
     this.api.push(data); 
     if(scroll){ 
      scroll.complete() 
     } 
     },err=>{ 
     if(scroll){ 
      scroll.complete() 
     } 
     }); 
    }) 
    } 

在doInfinite，

doInfinite(infiniteScroll:any) { 
    this.loadRecipies(infiniteScroll,this.start); 
    this.start+=50; 
    }