离子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。
对于您的页面国家，请将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;
  }