我有以下页面和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);
}
}