Javascript 异步调用返回后重新加载页面内容
我有Javascript 异步调用返回后重新加载页面内容,javascript,node.js,angular,ionic-framework,ionic2,Javascript,Node.js,Angular,Ionic Framework,Ionic2,我有Ionic2app和SideMenu模板,在rootPage上我有这个代码 export class HomePage { products: any = []; constructor(public navCtrl: NavController, public navParams: NavParams, private woo: WooCommerce) { } ionViewDidLoad() { this.woo.Fetch('products', fu
Ionic2
app和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节点上的提供者包装器
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));
});
}
}
在我的页面中.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>
{{product.title | StripHTML}}
{{product.price_html{StripHTML:{split:,index:0}}
问题:Fetch
确实加载并返回数据,但是页面视图没有被刷新,直到我单击菜单切换按钮,页面重新呈现或刷新,产品/数据显示
当
Fetch
调用callback
函数重新加载或刷新时,是否有其他方法可以实现 Angular通常检测更改并更新其视图。它可能无法在WooCommerceAPI中获得更新。
尝试使用以确保角度传感器检测到更改
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));
}
你是说页面没有显示你返回的数据吗?@suraj是的,它没有显示返回的数据