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

Question

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

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

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 and here 以获得很好的解释。

如您所见，

Application state change is caused by three things:

1) Events - User events like click, change, input, submit, …

2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -

3) setTimeout(),setInterval(), because JavaScript

… it turns out that these are the only cases when Angular is actually interested in updating the view.

所以我认为您需要使用 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);
    });


}

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

ionic - content of page only visible after clicking menu toggle

javascript

typescript

ionic2

ionic3

angular