离子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我无法解决这个问题。任何人都可以帮我解决这个问题。

感谢提前:)

来源

2017-11-11 VRK

包装你的手风琴，其中包括关于您的信息数据的条件一个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>

来源

2017-11-11 13:03:54 Antikhippe

这火从服务或服务提供者类的HTTP请求的最佳实践
IonViewDidLoad仅在加载页面时运行，以便在HTTP请求被触发之前加载空白页面。
使用IonViewCanEnter可以认为之前运行呈现使用ionic loading component这样用户就会知道什么
显示加载在后台发生

来源

2017-11-11 13:08:34

离子2呈现数据之前查看加载

回答

相关问题