即使分页向下滚动,我的页面也会重复相同的内容

时间:2019-02-02 18:18:22

标签: ionic-framework ionic3

我正在为新闻应用程序编写代码,但是即使向下滚动我也会得到相同的内容,我希望在向下滚动页面时加载下10个内容

构造函数(公共navCtrl:NavController,toastCtrl:ToastController,公共loadingCtrl:LoadingController,公共api:Api,navParams:NavParams,项目:Items,公共http:HttpClient){

let loader = this.loadingCtrl.create({
  content: "Please wait..."
});
loader.present().then(() => {
  this.api.getVideos(this.page+1, 10).subscribe(data => {
    console.log(data)
    this.getData = data
    loader.dismiss()
  }, err=>{
    console.log(err)
    loader.dismiss()
  })
}) }   doInfinite(infiniteScroll: any) {
       setTimeout(() => {
        console.log(this.page)
     this.api.getVideos(this.page + 1).subscribe(data => {
       this.page = this.page + 1
       console.log(data)
       // this.getData.push(data)
       this.getData = this.getData.concat(data);
       console.log(this.getData)
       infiniteScroll.complete()
     })
     }, 1000)
    }

这是我的api文件:

getVideos(page, perPage){ 
  return this.http.get(`${this.api_url}/postsfilter[post_format]=${page}&per_page=${perPage}`);

}

1 个答案:

答案 0 :(得分:0)

删除的concat并检查this.page值。

 page = 0; 
 getData: any = [];

 constructor(public navCtrl: NavController,
                toastCtrl: ToastController,
                public loadingCtrl: LoadingController, 
                public api:Api, 
                navParams: NavParams, 
                items: Items,
                public http: HttpClient) {

   loader.present().then(() => {
      this.api.getVideos(this.page, 10).subscribe(
        data => {
          console.log(data);
          this.getData = data;
          loader.dismiss();
        },
        err => {
          console.log(err);
          loader.dismiss();
        }
      );
    });            

         }   


  doInfinite(infiniteScroll: any) {
    setTimeout(() => {
      console.log(this.page);
      //you should define here where new value for page!!
      this.page = this.page + 1;
      this.api.getVideos(this.page, 10).subscribe(data => {
        console.log(data);
     //every scroll we are pushing new values to getData array.

        this.getData.push(data);
        // this.getData = this.getData.concat(data);
        console.log(this.getData);
        infiniteScroll.complete();
      });
    }, 1000);
  }