在我的Ionic 2应用程序中,我有一个消耗服务的组件,该服务使http GET获取一些数据.然后我的组件调用此服务,当数据可用时,它会设置并显示它.
它看起来如下：
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)
}
...
}
当我的组件异步提取数据时,我试图让一个加载器旋转,一旦数据可用,我希望加载器消失.
你可以找到一个
working plunker here.
就像你可以在那个plunker的代码中看到的那样,我会做一些更改,以使你的代码正常工作：
export class FarmList implements OnInit {
items: Object;
// Define the loading var here,so we can access later when the information is ready
loading : any;
constructor(public testService: TestService,public nav: NavController){
}
// Instead of 'ngOnInit',I would 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 we get the data,we hide the loading
this.hideLoading()});
}
// I 've added this method so we can grab the loading var and use it
// to hide the loading component.
private hideLoading(){
this.loading.dismiss();
}
...
}
================================
更新：
截至Ionic 2.0.0-beta.8(2016-06-06)changelog发布：
onPageWillEnter已重命名为ionViewWillEnter
