即使在分页中向下滚动后，我的页面也会重复相同的内容

Question

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

constructor(public navCtrl: NavController,toastCtrl: ToastController,public loadingCtrl: LoadingController, public api:Api, navParams: NavParams, items: Items,public 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}`);

}

Answer 1

移除 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);
  }