[英]reloading page content after async call returns
I have Ionic2
app with SideMenu
template , and on the rootPage
I have this code 我有带
SideMenu
模板的Ionic2
应用程序,在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() {
}
}
where WooCommerce
is a provider-wrapper on WooCommerce-Nodejs
其中
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));
});
}
}
in my page.ts
在我的
page.ts
ionViewDidLoad() {
this.woo.Fetch('products', function (res) {
this.products = res.products;
console.log(this.products);
}.bind(this));
}
and page.html
和
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... 问题:
Fetch
确实加载并返回数据,但页面视图没有刷新,直到我点击菜单切换按钮,然后页面重新渲染或刷新,产品/数据显示...
is there away to make it when Fetch
call the callback
function it rerender or refresh ? 当
Fetch
调用它重新渲染或刷新的callback
函数时,有没有它?
Angular generally detects changes and updates its view. Angular通常会检测更改并更新其视图。 It is probably not getting the update within Woocommerce API.
它可能没有在Woocommerce API中获得更新。 Try using
ngZone
to ensure the change is detected by Angular. 尝试使用
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));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.