问题描述

I am new to Ionic and trying to develop a Food Ordering Application using Ionic 4 and Woocommerce API.

I am able to fetch record from API. When I click on Side Menu Item Category name, it is retrieving items under that category id.

Inside the item listing page, items are showing only when I am resizing the chrome browser using inspect element from desktop to mobile view or vice versa or any kind of refresh is happening. We may assume that the information is in hidden state and on resizing or refreshing it is visible to user.

The same thing happening when ion-infinite-scroll option I am using.

Any idea how to load the data when the new page will load as well as scrolling the page?? Please let me know if you need any further information for the same.

Please help.

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

标签： ionic-frameworkionic3woocommerce-rest-api

您需要添加 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);
     });
   }

ionic-framework - Data is not showing in page using Ionic 4