Моя страница повторяет одно и то же содержание даже после прокрутки вниз по страницам

Question

Я пишу код для своего новостного приложения, но я получаю тот же контент даже после прокрутки вниз. Я хочу, чтобы следующие 10 содержаний загружались при прокрутке вниз по странице.

конструктор (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);
  }