Question

我正在关注显示WooCommerce商店产品的教程。一般来说，我使用的是离子侧边栏模板。

问题：我的主页内容不可见。只有在我单击菜单切换按钮后，内容才会立即显示。这似乎是一个缓存/加载问题。

home.html的

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-grid>

  <ion-row  *ngFor="let product of products">
    <ion-card>
      <ion-card-header>
        Name: {{product.name}}
      </ion-card-header>

      <ion-card-content>
        <img [src]="product.images[0].src">
      </ion-card-content>

    </ion-card>
  </ion-row>

</ion-grid>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as WC from 'woocommerce-api';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

WooCommerce: any;
products: any;

constructor(public navCtrl: NavController) {

    this.WooCommerce = WC({

        url: "http://localhost:8888/wordpress/",
        consumerKey: 'ck_.....',
        consumerSecret: 'cs_....',
        wpAPI: true,
        version: 'wc/v1'
    });

    this.WooCommerce.getAsync("products").then((data) =>{

        console.log(JSON.parse(data.body));

        this.products = JSON.parse(data.body);
        console.log(typeof this.products);
    }, (err) => {
        console.log(err);
    });


}

 }

Answer 1

我认为这是因为一些非常有趣和强大的东西叫做Zones。如果这个概念对您而言是新的，请参阅here和here以获得更好的解释。

你可以在那里阅读，

应用程序状态更改由三件事引起：

1）事件 - 用户事件，如点击，更改，输入，提交，......

2）XMLHttpRequests - 例如从远程服务获取数据时   计时器 -

3）setTimeout（），setInterval（），因为JavaScript

......事实证明，这是Angular实际上的唯一情况   有兴趣更新视图。

所以我认为你需要让Angular知道你的异步操作何时结束使用ngZone：

import { Component, NgZone } from '@angular/core';

@Component({...})
export class HomePage {

    constructor(public navCtrl: NavController, private ngZone: NgZone) {

    this.WooCommerce = WC({

        url: "http://localhost:8888/wordpress/",
        consumerKey: 'ck_.....',
        consumerSecret: 'cs_....',
        wpAPI: true,
        version: 'wc/v1'
    });

    this.WooCommerce.getAsync("products").then((data) =>{

        console.log(JSON.parse(data.body));

        this.ngZone.run(() => {
          // Update the products inside the zone so angular is
          // aware of it, and knows that the view should be updated
          this.products = JSON.parse(data.body); 
        });

        console.log(typeof this.products);
    }, (err) => {
        console.log(err);
    });


}

离子 - 页面内容仅在单击菜单切换后可见

1 个答案: