Http.get with ion-refresh and LoadingController

Ionic Framework ionic-v3
1

Hi,

I’m very new in Ionic2 and I need a little bit help.

I have a TS like this:

ngAfterViewInit() {
  this.getAllEvents();
}


doRefresh(refresher) {
  setTimeout(() => {
    refresher.complete();
  }, 1000);

  this.loading.present();
  this.eventService.getAllEvents().subscribe(
    data => {
      this.events = data.data.appointments;
    },
    err => console.log(err),
    () => this.loading.dismiss()
  );
}

getAllEvents() {
  this.loading.present();
  this.eventService.getAllEvents().subscribe(
    data => {
      this.events = data.data.appointments;
    },
    err => console.log(err),
    () => {
      this.loading.dismiss();
    }
  );
}

events.html

<ion-refresher (ionRefresh)="doRefresh($event)">
  <ion-refresher-content></ion-refresher-content>
</ion-refresher>

<ion-list [hidden]="events.length === 0">

I have the same code double - is there a better way to do that? Maybe it’s possible to use only the function doRefresh() and in ngAfterViewInit() i start also doRefresh. But how? In HTML I start the function with doRefresh($event).

And my second problem the LoadingCtrl is not working in the refresher (I know I have deleted in the code above). I get the error: Subscriber.js:229 Uncaught EXCEPTION: Error in build/pages/events/events.html:12:17
ORIGINAL EXCEPTION: Attempt to use a destroyed view: detectChanges

Thanks for your support
BR Thomas

2

Few points on your code

  1. what is the purpose of infinite scroll, the actual purpose of infinite scroll is consume the data on the go
  2. you are not loading your data partially
  3. From your statement both code are redundant then why it need to be called again
  4. Refreshing is some what different than scrolling, if you want to reload your data do it with ion-refresher

And last but not the least i feel the error happens due to the loader component remove it, it is not needed inside the function

yes you can simply call it like this

doRefresh(refresher) {
  setTimeout(() => {
    this.getAllEvents();
    refresher.complete();
  }, 1000);

}

getAllEvents() {
  this.eventService.getAllEvents().subscribe(
    data => {
      this.events = data.data.appointments;
    },
    err => console.log(err)
  );
}

again i am telling you that to reload the data use ion-refresher

3

Hi Thavarajan,

thanks for you fast response.
I do not know if I understand you correctly. When I start my app I load the data (getAllEvents). The LoadingCtrl is working.

Now a user would like to reload the data. The user push down (ion-refresher starts the doRefresh) and the data to be reloaded. And that is my problem. When I reload the data the LoadingCtrl ist not working. He crash the app with the error above. Without the LoadingCtrl it works fine.

My problem is not scrolling or loading the data partially

4

may i know what is the purpose of loading component?

because ion refresher it self has the spinner effect, try with that

any way the original problem is you are dismissing the loading component,
once you dismiss it, you need to create it again

OMG(Maximum replies on first day wait for an hour)

5

Why are you using setTimeout?

6

To get the data async? may i right, if wrong please correct me

7

no, this is original code from Ionic 2
http://ionicframework.com/docs/v2/api/components/refresher/Refresher/

but when I try this, refresh is starting, I see the spinner and the app do nothing. I think the app crash. It’s impossible to do something in the app. Only refresh the browser.

      doRefresh(refresher) {

    this.eventService.getAllEvents().subscribe(
      data => {
        this.events = data.data.appointments;
      },
      err => console.log(err)
    ),
      () => refresher.complete();;
  }
8

can you please add a plunker link

9

Thanks for your help. This code is working:

events.html

<ion-content>

  <ion-refresher (ionRefresh)="refreshList($event)" pullMin="120" pullMax="180">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list [hidden]="events.length === 0">

events.ts

        getItems(){
      let loading  = this.loadingCtrl.create({
        content: 'Lade Termine...',
        dismissOnPageChange: true
      });
      loading.present();
      this.eventService.getAllEvents().subscribe(
        data => {
          this.loadingContent = false;
          loading.dismiss();
          this.events = data.data.appointments;
        });
    }

    refreshList(refresher) {
      setTimeout(() => {
        refresher.complete();
        this.getItems();
      }, 500);
    }