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

Question

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

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

在项目列表页面中，仅当我使用检查元素将chrome浏览器的大小调整为从桌面到移动视图（反之亦然）或正在进行任何类型的刷新时，项目才显示。我们可以假设信息处于隐藏状态，并且在调整大小或刷新信息时，用户可以看到该信息。

当我使用离子无限滚动选项时，会发生同样的事情。

有什么办法在新页面加载以及滚动页面时如何加载数据？如果需要其他任何信息，请告诉我。

请帮助。

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