Ionic2- infinite scrolling crashes my app


#1

I’m following official ionic doc for implementing infinite scrolling in my app.
Here’s the link to the doc.

I have a list of countries (array, obviously) and I am tryna implement infinite scrolling in this list. But my app crashes when I try to scroll. It loads the data initially but when I start scrolling, it goes haywire.


<ion-content>
    <ion-list>
        <ion-item *ngFor="let country of countries">{{country}}</ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

Below given is my class. Note: The country array can have any number of items. For now, I have statically included some values. In real application, it’s fetched using a HTTP get service. I’m making this mobile app on all 3 platforms- android, ios, and windows.
Here’s the code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-favorites',
  templateUrl: 'favorites.html',
})
export class Favorites {
  countries=[];
  constructor(public navCtrl: NavController) {

     this.countries= [
      'India',
      'Lanka',
      'Russia',
      'Pakisthan',
      'Iran',
      'Iraq',
      'Jordan',
      'Israel',
      'Australia',
      'Aregentina',
      'Brasil',
      'USA',
      'Canada',
      'Alaska',
      'Japan',
      'N Korea',
      'S Korea',
      'China',
      'Austria',
      'UK',
      'Germany',
      'France',
      'Italy',
      'Belgium',
      'Peru',
      'Netherlands',
      'Singapore',
      'Malaysia',
      'S Africa',
      'Zimbawe',
      'Egypt',
      'Kenya',
      'Uganda',
      'New Zealand',
      'Istanbul',
      'UAE',
      'Afghanistan',
      'Armenia',
      'Angola',
      'Algeria',
      'Indonesia',
      'Iceland'
     ];
  }

    doInfinite(infiniteScroll) 
    {
        console.log('Begin async operation');

        setTimeout(() => {
        for (let country of this.countries) {
            this.countries.push( country );
        }

        console.log('Async operation has ended');
            infiniteScroll.complete();
        }, 500);
    }

}

#2

Hi @themarsbeing

export class Favorites {
  public coutrie:any = [ ];
  publiccountries:any=[];
  constructor(public navCtrl: NavController) {
     this.countrie= [
      'India',
      'Lanka',
      'Russia',
      'Pakisthan',
      'Iran',
      'Iraq',
      'Jordan',
      'Israel',
      'Australia',
      'Aregentina',
      'Brasil',
      'USA',
      'Canada',
      'Alaska',
      'Japan',
      'N Korea',
      'S Korea',
      'China',
      'Austria',
      'UK',
      'Germany',
      'France',
      'Italy',
      'Belgium',
      'Peru',
      'Netherlands',
      'Singapore',
      'Malaysia',
      'S Africa',
      'Zimbawe',
      'Egypt',
      'Kenya',
      'Uganda',
      'New Zealand',
      'Istanbul',
      'UAE',
      'Afghanistan',
      'Armenia',
      'Angola',
      'Algeria',
      'Indonesia',
      'Iceland'
     ];
this.countries= [
      'India',
      'Lanka',
      'Russia',
      'Pakisthan',
      'Iran',
      'Iraq',
      'Jordan',
      'Israel',
      'Australia',
      'Aregentina',
      'Brasil',
      'USA',
      'Canada',
      'Alaska',
      'Japan',
      'N Korea',
      'S Korea',
      'China',
      'Austria',
      'UK',
      'Germany',
      'France',
      'Italy',
      'Belgium',
      'Peru',
      'Netherlands',
      'Singapore',
      'Malaysia',
      'S Africa',
      'Zimbawe',
      'Egypt',
      'Kenya',
      'Uganda',
      'New Zealand',
      'Istanbul',
      'UAE',
      'Afghanistan',
      'Armenia',
      'Angola',
      'Algeria',
      'Indonesia',
      'Iceland'
     ];
  }

    doInfinite(infiniteScroll) 
    {
        console.log('Begin async operation');  
   setTimeout(() => {
 for (let country of this.countrie) {
            this.countries.push( country );
        }
        console.log('Async operation has ended');
            infiniteScroll.complete();
        }, 500);
    }

}

Hope this will solve your issue.

Feel free to mark it as a solution and you can always like the answer by clicking heart icon.


#3

No, it’s not working. Tried your solution.


#4

hi @themarsbeing

Now try i am edited that .

Hope this will work for you. If you find it helpful then you can mark it as a solution. You can always like the answer by clicking on heart icon.


#5

Hi! Thanks for updating your answer but unfortunately it’s still not working.