ionic infinite scroll can't show information - ionic4

Question

I tried to use ionic infinite to load more item,
doRefresh(event) {
console.log('Begin async operation');
setTimeout(() => {
this.nextpage()
console.log("test")
event.target.complete();
}, 2000);
}
nextpage(){
this.datanum = this.datanum+5;
this.sqliteDB.getAttractionsbycondition(this.sql,this.datanum).then(res => {
this.alldata_new = res
this.alldata_new.forEach(element => {
this.geocoder.geocode({ 'address': element.Address }, (results, status) => { //先找到當地的經緯度
let pos;
if (status == google.maps.GeocoderStatus.OK) {
pos = { //目標經緯度
lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng()
};
if(google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(pos.lat, pos.lng), new google.maps.LatLng(this.exampleLat,this.exampleLng))>=1000){
this.distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(pos.lat, pos.lng), new google.maps.LatLng(this.exampleLat,this.exampleLng))/1000;
this.distance = Math.round(this.distance);
if(this.distance>this.data.distance){
console.log("too far");
this.alldata_new.splice(this.alldata_new.indexOf(element),1);
}
this.distance = this.distance +"kilometer";
element.distance = this.distance;
}else{
this.distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(pos.lat, pos.lng), new google.maps.LatLng(this.exampleLat,this.exampleLng));
this.distance = Math.round(this.distance);
if(this.distance/1000>this.data.distance){
console.log("too far");
this.alldata_new.splice(this.alldata_new.indexOf(element),1);
}
this.distance = this.distance +"meter";
element.distance = this.distance;
}
// 四捨五入
// });
}
else{
element.Aname = "failure";
}
});
});
})
console.log(this.alldata+"hello ")
}
Here's the result picture,the problem is It did work and load more items, but the information I want them to show disappeared, but I did check the console.log and the new loaded item did push into my data,so I wonder what could be the problem?