Ionic infinitescroll with json data

Ionic Framework
1

Hello,

I have the following page and restapi that works fine. But there are al lot of items loaded and what I want to do is to load a few items and every time when scrolling down after about ten items load more. I thought infinitescroll is then a good thing to use but I dont know how to implement in the following pages, anyone who can help me the good direction?

RestApi

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://....nl/";

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

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

Tab2 .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;
	
	constructor(public api: RestApiService, public loadingController: LoadingController) { }
	
	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();
    });
}

}

Tab2 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 data">
    
	<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-content>
2

add the html page i add

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

on the ts page i added some

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

}

I changed on the html page the let f of data to let f of items
What I now see are 5 empty cards so somewhere I do something wrong now. Data can not be found, anyone can help?