angular - How to dismiss Loader after data is ready -
in ionic 2
app, have component consumes service makes http fetch data. component calls service , when data available sets , presents it.
it looks following:
export class farmlist implements oninit { items: object; constructor(public testservice: testservice, public nav: navcontroller){ } ngoninit(){ this.getdata() } getdata(){ let loading = loading.create({ content: 'please wait..', spinner: 'crescent' }) this.nav.present(loading) this.testservice.fetchdata().then(data => this.items = data) } ... }
while component fetches data asynchronously, trying have loader
spinning , once data available, want loader
disappear.
however, current code spinner keeps spinning after data available , displayed can seen screenshot:
getdata()
method makes service call. how can fix this? correct way implement loader?
you can find working plunker here.
like can see in code of plunker, make few changes in order make code work properly:
export class farmlist implements oninit { items: object; // define loading var here, can access later when information ready loading : any; constructor(public testservice: testservice, public nav: navcontroller){ } // instead of 'ngoninit', use 'ionviewwillenter' ionviewwillenter(){ this.getdata() } getdata(){ this.loading = loading.create({ content: 'please wait..', spinner: 'crescent' }) this.nav.present(this.loading) this.testservice.fetchdata().then(data => { this.items = data; // after data, hide loading this.hideloading()}); } // 've added method can grab loading var , use // hide loading component. private hideloading(){ this.loading.dismiss(); } ... }
================================
update:
as of release of ionic 2.0.0-beta.8 (2016-06-06) changelog:
onpagewillenter
renamed ionviewwillenter
Comments
Post a Comment