javascript - Refreshing data through constructor in Angular 2 / Ionic 2 -

i have ionic 2 app 1 view 3 different data sets. data loaded in constructor , based on variable in page params, it's decided data set show.

at every successful data call observable, event handler logs success when data loaded. this works when click/load view first time. if click 2nd or other time, data not re-loaded (no log). also, when console log anything, won't show @ 2nd+ click.

so wonder what should change load data everytime , how constructor works in manner.

this how code looks like. jsons called nameslistprovider.

@component({   templateurl: '...', }) export class listofnames {     ...     private datalistall: array<any> = [];     private datalistfavourites: array<any> = [];     private datalistdisliked: array<any> = [];   constructor(private nav: navcontroller, ...) {      ...     this.loadjsons();     console.log('whatever');   }     loadjsons(){     this.nameslistprovider.getjsons()     .subscribe(       (data:any) => {         this.datalistfavourites = data[0],         this.datalistdisliked = data[1],         this.datalistall = data[2]           if (this.actuallist === 'mainlist') {             this.listofnames = this.datalistall;             this.swipeleftlist = this.datalistdisliked;             this.swiperightlist = this.datalistfavourites;          }          else if (...) {             ...          }          this.listsearchresults = this.listofnames;         }, err => console.log('hey, error when loading names list - ' + err),       () => console.info('loading jsons complete')           )    } 

what you're looking lifecycle events ionic2 pages. instead of using ngoninit can use of events ionic2 exposes:

page event        description ----------        ----------- ionviewloaded     runs when page has loaded. event happens once per page being created , added dom. if page leaves cached, event not fire again on subsequent viewing. ionviewloaded event place put setup code page. ionviewwillenter  runs when page enter , become active page. ionviewdidenter   runs when page has entered , active page. event fire, whether first load or cached page. ionviewwillleave  runs when page leave , no longer active page. ionviewdidleave   runs when page has finished leaving , no longer active page. ionviewwillunload runs when page destroyed , have elements removed.  ionviewdidunload  runs after page has been destroyed , elements have been removed. 

in case, can use ionviewwillenter page event this:

ionviewwillenter {   // executed every time page shown ...   this.loadjsons();   // ... } 

---

edit

if you're going obtain data show in page asynchronously, since don't know how long take until data ready, i'd recommend use loading popup user can aware of happening in background (instead of showing blank page few seconds until data loaded). can add behaviour code this:

// import loadingcontroller import { loadingcontroller, ...} 'ionic/angular';  @component({   templateurl: '...', }) export class listofnames {     ...     private datalistall: array<any> = [];     private datalistfavourites: array<any> = [];     private datalistdisliked: array<any> = [];      // create property able create , dismiss different methods of class     private loading: any;     constructor(private loadingctrl: loadingcontroller, private nav: navcontroller, ...) {      ...     this.loadjsons();     console.log('whatever');   }    ionviewwillenter {     // executed every time page shown ...      // create loading popup     this.loading = this.loadingctrl.create({       content: 'loading...'     });      // show popup     this.loading.present();      // data     this.loadjsons();      // ...   }    loadjsons(){     this.nameslistprovider.getjsons()     .subscribe(       (data:any) => {         this.datalistfavourites = data[0],         this.datalistdisliked = data[1],         this.datalistall = data[2]           if (this.actuallist === 'mainlist') {             this.listofnames = this.datalistall;             this.swipeleftlist = this.datalistdisliked;             this.swiperightlist = this.datalistfavourites;          }          else if (...) {             ...          }          this.listsearchresults = this.listofnames;        }, err => console.log('hey, error when loading names list - ' + err),       () => {          // dismiss popup because data ready         this.loading.dismiss();          console.info('loading jsons complete')}     )    }