刷新頁面內容返回

Question

我Ionic2應用與SideMenu模板，並在rootPage我有這樣的代碼

export class HomePage { 

    products: any = []; 

    constructor(public navCtrl: NavController, public navParams: NavParams, private woo: WooCommerce) { 

    } 

    ionViewDidLoad() { 
    this.woo.Fetch('products', function (res) { 
     this.products = res.products; 
     //console.log(this.products[0]); 
    }.bind(this)); 
    } 

    ngOnInit() { 
    } 

} 

其中WooCommerce是在WooCommerce-Nodejs

export class WooCommerce { 

    woo: any = null; 

    constructor(public http: Http, private util: Utilities) { 
     this.woo = WooCommerceAPI(); 
    } 

    Fetch(what, callback) { 
     return this.woo.getAsync(what).then(function (result) { 
      callback(JSON.parse(result.body)); 
     }); 
    } 
} 

供應商，包裝我的page.ts

ionViewDidLoad() { 
     this.woo.Fetch('products', function (res) { 
      this.products = res.products; 
      console.log(this.products); 
     }.bind(this)); 
     } 

和page.html

<ion-col center text-center col-6 *ngFor="let product of products"> 
     <ion-card> 
      <img src="{{product.featured_src}}" /> 
      <ion-card-content> 
      <ion-card-title style="font-size: 100%"> 
       {{ product.title | StripHTML }} 
      </ion-card-title> 
      </ion-card-content> 
      <ion-row center text-center> 
       <p style="color: red"> 
       {{ product.price_html | StripHTML:{split:" ",index:0} }} 
       </p> 
      </ion-row> 
     </ion-card> 
     </ion-col> 

問題：Fetch做負載和返回數據，但頁面視圖不被刷新，直到我點擊菜單切換按鈕，然後在頁面重新渲染或者刷新和產品/數據顯示...

是否有消息使Fetch調用callback函數它重新顯示或刷新？

Answer 1

Angular通常會檢測更改並更新其視圖。它可能沒有得到Woocommerce API中的更新。 嘗試使用ngZone以確保Angular檢測到更改。

import {NgZone} from '@angular/core' 
constructor(ngZone: NgZone){}//inject in constructor 

    ionViewDidLoad() { 
     this.woo.Fetch('products', function (res) { 
      this.ngZone.run(()=>{//use here 
       this.products = res.products; 
       console.log(this.products); 
      }); 
     }.bind(this)); 
     }