I have an issue that appeared after i upgraded to ionic 3.6.
The issue is the ion-infinite-scroll stopped worked for me i can’t figure what is the reason, i tried to downgrade to previous version but it still don’t work.
I have a call for a back end point and after i receive the data it doesn’t show it on the screen.
Here is my template
<ion-content>
<ion-refresher (ionRefresh)="refresher($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-item no-lines class="bannar" *ngIf="bannar" (click)="goToBannar()" [ngStyle]="{'background-image': 'url(' + bannarImg + ')'}">
</ion-item>
<ion-grid text-wrap>
<div *ngFor="let gym of gymList | orderBy: ['-sponsorship_priority', 'distance'] ">
<ion-col ion-item (click)="gymDetailsView(gym.id)">
<ion-row>
<ion-col class="logo-container" col-4>
<img class="img-detail" [src]="gym.logo" />
</ion-col>
<ion-col col-8>
<h2 class="list-item-heading ">{{gym.name}}
<ion-icon *ngIf="gym.sponsorship_priority != 0" class="dist" ion-text color="primary" class="ribbon-bin" name="ios-ribbon"></ion-icon>
</h2>
<p class="list-item-address">{{gym.area}}</p>
<div class="rating-wrapper">
<div class="ratgin-container">
<rating class="list-item-rating" ion-text color="primary" [(ngModel)]="gym.rating" readOnly="true" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false">
</rating>
<span class="rating-number list-num-rating" ion-text color="secondary">[{{gym.number_of_ratings}}]</span>
</div>
<div class="range-container">
<ion-icon *ngIf="gym.sponsorship_priority == 0" class="location-icon" ion-text color="primary" name="md-pin"></ion-icon>
<span *ngIf="gym.sponsorship_priority == 0" class="list-dist ribbon-bin" ion-text color="secondary">{{gym.distance}} KM</span>
</div>
</div>
</ion-col>
</ion-row>
</ion-col>
</div>
<div *ngIf="gymList">
<div *ngIf="gymList.length == 0" class="no-class-wrapper">
<span class="no-class bebas">NO Results Found</span>
<span class="select-another-day nexaL">Try a different search</span>
</div>
</div>
</ion-grid>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
and here is my component
export class GymListPage {
gymList: any[];
dist: any = 40000
pos: any
facilities: any = ""
area: any = ""
search: any = ""
previous: any
next: any
ratings: any = ""
bannar = false;
bannarImg: any;
bannarLink: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public api: Api,
public geolocation: Geolocation,
public events: Events,
private network: Network,
public IonicLibrary: IonicLibraryService,
public loadingCtrl: LoadingController,
public modalCtrl: ModalController,
private diagnostic: Diagnostic,
public platform: Platform
) {
this.geolocation.getCurrentPosition().then((position) => {
this.pos = position.coords.longitude + ',' + position.coords.latitude
// alert(this.pos)
// this.pos = '31.206178,30.0531916';
this.getGems(this.pos)
}).catch((error) => {
alert(JSON.stringify(error))
this.IonicLibrary.basicAlert('Location Error', 'Your location is disabled, please Enable to continue', [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Ok',
handler: data => {
if (this.platform.is('android')) {
this.diagnostic.switchToLocationSettings();
}
if (this.platform.is('ios')) {
this.diagnostic.switchToSettings()
}
if (this.platform.is('mobileweb')) {
alert("position error");
}
}
}
])
});
this.events.subscribe('gyms filters', (filters) => {
this.dist = (filters.range * 1000)
this.facilities = filters.categories
this.area = filters.location
this.search = filters.search
this.ratings = filters.ratings
this.getGems(this.pos)
});
}
getGems(pos) {
let loader = this.loadingCtrl.create({
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box">
<ion-spinner name="circles"></ion-spinner>
</div>
</div>`,
showBackdrop: false
});
loader.present();
this.api.gymAds().subscribe(data => {
if (data.count !== 0) {
this.bannar = true;
this.bannarImg = data.results[0].picture;
this.bannarLink = data.results[0].link;
console.log(this.bannarLink);
}
}, err => console.log(err));
this.api.getGymList(pos, this.dist, this.facilities, this.area, this.search, this.ratings).subscribe(data => {
console.log(data);
this.previous = data.previous
this.next = data.next
this.gymList = data.results;
// alert(JSON.stringify(this.gymList))
}, err => console.log(err),
() => {
loader.dismiss();
});
}
refresher(refresher) {
this.getGems(this.pos);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
gymDetailsView(userId) {
this.navCtrl.push(GymDetailsPage, {
id: userId
})
}
goToFilterPage() {
let modal = this.modalCtrl.create(GymFilterPage);
modal.present();
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
if (this.next) {
setTimeout(() => {
this.api.infinit(this.next).then(data => {
console.log(data)
this.next = data['next'];
this.previous = data['previous']
// this.gymList.concat(data['results']);
this.gymList.push(...data['results'])
infiniteScroll.complete();
})
}, 500);
} else {
infiniteScroll.complete();
}
}
goToBannar() {
window.open(this.bannarLink, "_blank", "zoom=true");
}
}