带有json数据的离子无限滚动

时间:2019-01-15 21:41:20

标签: angular ionic-framework infinite-scroll

我有以下页面和restapi可以正常工作。但是有很多项目已加载,我要做的是加载一些项目,每次向下滚动约十个项目后再加载更多。我以为infinitescroll会是一件好事,但是我不知道如何在接下来的页面中实现,有谁能帮助我找到正确的方向?

使用此附加代码,我可以看到5个项目,但都为空

Rest API

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { forkJoin } from 'rxjs';

const apiUrl = "http://blabla.nl/";

@Injectable({
  providedIn: 'root'
})
export class RestApiService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
      let response = this.http.get(apiUrl+'nieuws');
      return forkJoin([response]);
  }

}

HTML页面

<ion-header>
  <ion-toolbar>
    <ion-title>
      F1 nieuws
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="cards-bg">

  <ion-card *ngFor="let f of items">

    <img src="{{f.Afbeelding}}">
  <ion-card-content>
    <ion-card-title>{{f.title}}</ion-card-title>
    <div>
      {{f.body}}
   </div>
  </ion-card-content>

  </ion-card>

   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>


</ion-content>

TS页面

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { RestApiService } from '../rest-api.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

    data:any;
    items = [];
    count: number = 0;

    constructor(public api: RestApiService, public loadingController: LoadingController) { 
    for (let f = 0; f < 5; f++) {
        this.items.push(this.items[this.count]);
        this.count++
    }
    }



ngOnInit() {
  this.getData();
}   
    async getData() {
  const loading = await this.loadingController.create({
    message: 'Loading'
  });
  await loading.present();
  this.api.getData()
    .subscribe(res => {
      console.log(res);
      this.data = res[0];
      loading.dismiss();
    }, err => {
      console.log(err);
      loading.dismiss();
    });
}
doInfinite(infiniteScroll) {
        setTimeout(() => {
            for (let f = 0; f < 5; f++) {
                this.items.push(this.items[this.count]);
                this.count++
            }

        infiniteScroll.complete();
    }, 500);
    }

}

0 个答案:

没有答案