web-dev-qa-db-ja.com

ionic 2ビューロード前のレンダリングデータ

私は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（）を使用してapiを呼び出そうとしましたが、** ngOnInit（）およびionViewDidLoad（）**データは正しく取得されていますが、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は初めてなので、この問題を修正できません。誰かがこの問題を解決するのを手伝ってくれませんか。

前もって感謝します ：）

javascriptjqueryangularionic2ionic-view
5
VRK
  1. サービスまたはプロバイダークラスからHTTPリクエストを送信することをお勧めします
  2. IonViewDidLoad ページが読み込まれたときにのみ実行されるため、HTTPリクエストが実行される前に空のページが読み込まれます。
  3. ビューがレンダリングされる前に実行できる IonViewCanEnter を使用します
  4. イオンローディングコンポーネント を使用してローディングを表示し、ユーザーがバックグラウンドで何かが起こっていることを認識できるようにします
4
Prithivi Raj

情報データの条件を含む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>
2
Antikhippe