Record is not showing in page after redirect using Ionic 4

I am new to Ionic and trying to develop a Food Ordering Application using Ionic 3+ 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. Initially 10 records are fetching and upon scroll down it fetching another 10 records but the same is not showing until and unless I will resize the window or open/close the menu bar.

Any idea how to load the data when the item list page will load as well as loading more records on scrolling the page?? Please check the following lines of codes from my program.

# 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