ionic - メニューの切り替え後に表示されるページの内容

Question

私は、WooCommerceストアの製品を表示するチュートリアルに従っています。一般的に私はイオンサイドバーテンプレートを使用しています。

問題：私のホームページの内容は見えません。メニュートグルボタンをクリックして初めて、コンテンツが即座に表示されます。それはキャッシング/ローディングの問題のようです。

home.html

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-grid> 

    <ion-row *ngFor="let product of products"> 
    <ion-card> 
     <ion-card-header> 
     Name: {{product.name}} 
     </ion-card-header> 

     <ion-card-content> 
     <img [src]="product.images[0].src"> 
     </ion-card-content> 

    </ion-card> 
    </ion-row> 

</ion-grid> 
</ion-content> 

home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import * as WC from 'woocommerce-api'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

WooCommerce: any; 
products: any; 

constructor(public navCtrl: NavController) { 

    this.WooCommerce = WC({ 

     url: "http://localhost:8888/wordpress/", 
     consumerKey: 'ck_.....', 
     consumerSecret: 'cs_....', 
     wpAPI: true, 
     version: 'wc/v1' 
    }); 

    this.WooCommerce.getAsync("products").then((data) =>{ 

     console.log(JSON.parse(data.body)); 

     this.products = JSON.parse(data.body); 
     console.log(typeof this.products); 
    }, (err) => { 
     console.log(err); 
    }); 


} 

} 

Answer 1

私は非常に興味深いと強力な何かがゾーンと呼ばれるので、それはだと思います。新しいコンセプトの場合は、hereとhereを参照してください。

あなたが読むことができるため、

アプリケーションの状態変化は、3つの事柄によって引き起こされる：

1）イベント - クリック、変更、入力、提出、...

2のようなユーザー・イベント）XMLHttpRequests - 例JavaScriptの

が...それは角度が実際にビューを更新することに興味 あるとき、これらは唯一のケースであることが判明したので、

3）のsetTimeout（）、のsetInterval（） - リモートサービスからデータをフェッチ タイマーとき。

だから私はあなたの非同期操作がngZoneを使用して終了したとき、角度のノウハウを聞かせする必要があると思う：

import { Component, NgZone } from '@angular/core'; 

@Component({...}) 
export class HomePage { 

    constructor(public navCtrl: NavController, private ngZone: NgZone) { 

    this.WooCommerce = WC({ 

     url: "http://localhost:8888/wordpress/", 
     consumerKey: 'ck_.....', 
     consumerSecret: 'cs_....', 
     wpAPI: true, 
     version: 'wc/v1' 
    }); 

    this.WooCommerce.getAsync("products").then((data) =>{ 

     console.log(JSON.parse(data.body)); 

     this.ngZone.run(() => { 
      // Update the products inside the zone so angular is 
      // aware of it, and knows that the view should be updated 
      this.products = JSON.parse(data.body); 
     }); 

     console.log(typeof this.products); 
    }, (err) => { 
     console.log(err); 
    }); 


}