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

Question

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

我可以从API获取记录。当我单击侧面菜单项类别名称时，它将检索该类别ID下的项目。

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

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

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

请帮忙。

MENU.HTML (Here category listing for item populating)

<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 (Calling the item list page)

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>

Please check the following video about the exact issue that I have mentioned above

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