使用 Ionic 4 的页面中未显示数据

Question

我是 Ionic 新手，正在尝试使用 Ionic 4 和 Woocommerce API 开发食品订购应用程序。

我能够从 API 获取记录。当我单击侧菜单项类别名称时，它正在检索该类别 ID 下的项目。

在项目列表页面内，项目仅在我使用检查元素从桌面到移动视图或反之亦然或发生任何类型的刷新时调整 chrome 浏览器的大小时显示。我们可以假设信息处于隐藏状态，并且在调整大小或刷新时对用户可见。

当我使用 ion-infinite-scroll 选项时发生同样的事情。

知道如何在新页面加载以及滚动页面时加载数据吗？如果您需要任何进一步的信息，请告诉我。

请帮忙。

MENU.HTML（此处为项目填充的类别列表）

<button menuClose ion-item *ngFor="let cat of category_list" (click) = "openCategoryPage(cat)" menuClose>
       <ion-icon name="md-arrow-round-forward"></ion-icon> {{cat.name}}
</button>

MENU.TS（调用项目列表页面）

openCategoryPage(category) {
    this.childNavCtrl.setRoot('ItemsListPage',{'category': category});
 }

ITEMLIST.TS

 export class ItemsListPage {

      @ViewChild(Content) content: Content;
      woocommerce: any;
      products: any[];
      page: number;
      category: any;

      constructor(public navCtrl: NavController, public navParams: NavParams) 
     {
        this.page=1;
        this.category = this.navParams.get('category');
        this.products = [];

        this.woocommerce = WC({
          url:'http://xxxxxxxxxxx.com/xxxx',
          consumerKey:'ck_4c92xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          consumerSecret:'cs_ebd058cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          wpAPI: true,
          version: 'wc/v2',
          queryStringAuth: true
        });

          this.woocommerce.getAsync('products? 
         category='+this.category.id).then((data) =>{

             this.products = JSON.parse(data.body);

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

       loadMoreItems(event){
         this.page++;
          this.woocommerce.getAsync('products? 
          category='+this.category.id+'&page='+this.page).then((data) =>{

            let temp = JSON.parse(data.body);

            this.products = this.products.concat(JSON.parse(data.body));
            event.complete();

            if(temp.length < 10){
               event.enable(false);
            }
           },(err) =>{
             console.log(err);
         });
       }

ITEMLIST.HTML

<ion-list>
  <ion-item *ngFor="let product of products" text-wrap>
    <span *ngIf=product.price_html>
      <ion-thumbnail item-left>
        <img [src]= 'product.images[0].src' />
      </ion-thumbnail>
      <span [innerHTML]='product.name'></span>
      <ion-badge item-end><span [innerHTML]= "product.price_html"></span></ion-badge>
    </span>
  </ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more items...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

请查看以下视频，了解我上面提到的确切问题

http://nimb.ws/isTAXE

Answer 1

您需要添加 NgZone 使用下面的代码，它可能会工作。

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

  export class ItemsListPage {

  @ViewChild(Content) content: Content;
  woocommerce: any;
  products: any[];
  page: number;
  category: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone) 
 {
    this.page=1;
    this.category = this.navParams.get('category');
    this.products = [];

    this.woocommerce = WC({
      url:'http://xxxxxxxxxxx.com/xxxx',
      consumerKey:'ck_4c92xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      consumerSecret:'cs_ebd058cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      wpAPI: true,
      version: 'wc/v2',
      queryStringAuth: true
    });

      this.woocommerce.getAsync('products? 
     category='+this.category.id).then((data) =>{
        this.zone.run(() => {
            this.products = JSON.parse(data.body);
        });
      },(err) =>{
         console.log(err);
      });
   }

   loadMoreItems(event){
     this.page++;
      this.woocommerce.getAsync('products? 
      category='+this.category.id+'&page='+this.page).then((data) =>{
        this.zone.run(() => {
            let temp = JSON.parse(data.body);

            this.products = this.products.concat(JSON.parse(data.body));
            event.complete();

            if(temp.length < 10){
            event.enable(false);
            }
        });
       },(err) =>{
         console.log(err);
     });
   }