ionic 2 在视图加载之前渲染数据

Question

我正在学习 ionic 2，目前正面临一些 ionic 生命周期问题。我想在api获取成功数据后显示数据

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);

    });

  }

}

我尝试用 constructor() 也用 **ngOnInit() 和 ionViewDidLoad() 调用 api ** 数据正常但没有反映我的 view/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 正在调用并获得响应但无法在我的视图页面上看到此结果，现在如果我单击任何其他选项卡并再次单击类别选项卡然后我我能看到这个数据。

由于我是 ionic 2 的新手，因此我无法解决此问题。谁能帮我解决这个问题。

提前致谢:)

Answer 1

用包含信息数据条件的 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>

Answer 2

最佳做法是从服务或提供者发出 HTTP 请求class
IonViewDidLoad 运行仅当页面加载时，空页面将在触发 HTTP 请求之前加载。
使用 IonViewCanEnter 可以运行在视图呈现之前
使用 ionic loading component 显示加载，以便用户知道后台正在发生某些事情

ionic 2 在视图加载之前渲染数据

ionic 2 render data before view load

javascript

jquery

ionic-view

ionic2

angular