ionic - 页面内容仅在单击菜单切换后可见答案

【问题标题】：ionic - content of page only visible after clicking menu toggleionic - 页面内容仅在单击菜单切换后可见
【发布时间】：2017-11-28 05:15:09
【问题描述】：

我正在学习一个展示 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);
    });


}

 }

【问题讨论】：

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

我认为这是因为一个非常有趣和强大的东西叫做区域。如果这个概念对您来说是新概念，请参阅 here 和 here 以获得很好的解释。

如您所见，

应用程序状态变化是由三件事引起的：

1) 事件 - 用户事件，例如点击、更改、输入、提交……

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

3) setTimeout(),setInterval()，因为 JavaScript

... 事实证明，只有这些是 Angular 实际上是有兴趣更新视图。

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

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);
    });


}

【讨论】：