刷新页面内容返回

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