reloading page content after async call returns

Question

I have Ionic2 app with SideMenu template , and on the rootPage I have this code

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() {
  }

}

where WooCommerce is a provider-wrapper on 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));
        });
    }
}

in my page.ts

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

and 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>

Problem : the Fetch do load and return data, but the page view doesn't being refreshed , until I click on the menu toggle button , then the page re-render or refresh and the products/data show...

is there away to make it when Fetch call the callback function it rerender or refresh ?

Answer 1

Angular generally detects changes and updates its view. It is probably not getting the update within Woocommerce API. Try using ngZone to ensure the change is detected by 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));
      }