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