离子2呈现数据之前查看加载
问题描述:
我正在学习离子2,目前正面临一些离子生命周期问题。 我想在api获取成功数据后显示数据。离子2呈现数据之前查看加载
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoadingController} from 'ionic-angular';
import WooCommerceAPI from 'woocommerce-api';
@Component({
selector: 'page-category',
templateUrl: 'category.html',
})
export class CategoryPage {
information: any[] = [];
infoChild: any[] = [];
wooApi: any;
wooCat: any;
categories: any = [];
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController) {
this.wooApi = WooCommerceAPI(
{
url: 'abc.com/api/v1/cat',
}
);
//here also tried to call api
}
ngOnInit() {
//here also tried to call api
}
ionViewDidLoad() {
console.log("calling api");
/*from with nginit*/
this.wooApi.getAsync('products/categories?parent=0').then((data) => {
console.log("success");
this.wooCat = JSON.parse(data.body);
//this.information = this.wooCat;
for (let i = 0; i < this.wooCat.length; i++) {
console.log("in for loop");
this.wooApi.getAsync('products/categories?parent=' + this.wooCat[i].id).then((data) => {
console.log("get success", i);
let wooChild = JSON.parse(data.body);
for (let x = 0; x < wooChild.length; x++) {
this.infoChild.push(wooChild[x]['name']);
}
//console.log(this.infoChild)
this.information.push({
'items': {
'name': this.wooCat[i]['name'],
'children': [{
'name': this.infoChild
}]
}
});
this.infoChild = [];
});
}
console.log("current data", this.information);
});
}
}
我试图打电话给API与构造函数()也有** ngOnInit()& ionViewDidLoad()**数据正确,但越来越没有反映我的观点/ html页面上。
我的HTML代码如下:
<accordion *ngFor="let catParent of information" [title]="catParent.items.name">
<!-- (click)="itemSelected(item)" -->
<ion-list *ngFor="let catChild of catParent.items.children">
<button ion-item *ngFor="let catChildName of catChild.name">
{{ catChildName }}
</button>
</ion-list>
</accordion>
所以当我点击分类标签API的调用,并得到响应,但不能看到我的视图页上这个结果,现在如果我点击任何其他选项卡,然后再次点击类别选项卡,然后我可以看到这些数据。
由于我是新来的离子2我无法解决这个问题。 任何人都可以帮我解决这个问题。
感谢提前:)
答
包装你的手风琴,其中包括关于您的信息数据的条件一个div:
<div *ngIf="information.length>0;else noData">
<accordion *ngFor="let catParent of information" [title]="catParent.items.name">
...
</accordion>
</div>
<ng-template #noData>Loading accordion...</ng-template>
答
- 这火从服务或服务提供者类的HTTP请求的最佳实践
- IonViewDidLoad仅在加载页面时运行,以便在HTTP请求被触发之前加载空白页面。
- 使用IonViewCanEnter可以认为之前运行呈现使用ionic loading component这样用户就会知道什么
- 显示加载在后台发生