Reload page content after asynchronous call returns
I have an Ionic2
application with a template SideMenu
, and on 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 the provider wrapper onWooCommerce-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: Fetch
Loading and returning data, but the pageview doesn't refresh until I hit the menu toggle button, then re-render or refresh the page and show the products / data ..
is it possible to do this when it Fetch
calls the function callback
it updates or updates?
source to share
Angular usually detects changes and updates its view. This is probably not an update to the Woocommerce API. Try using ngZone
it to ensure the change is detected with 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));
}
source to share