API data is not getting at first loading ionic2, angular2 - wordpress

Question

I am struggling from last couple days.I am using ionic2/3 angular 2 and wordpress for data.
I am trying to load categories data at home page at first load but i am not getting. In browser it's coming properly and also when i click on menu button entire data is showing properly. I checked all blogs but didn't get any proper solution.
Please help me if any one had same issues and solved.Thanks in advance.
I am attaching my codes here.
enter code here
Home.ts-
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import * as WC from 'woocommerce-api';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
woocommerce: any;
categories: any[];
// Home=HomePage;
constructor(public navCtrl: NavController) {
this.categories=[];
}
ionViewDidLoad(){
this.getCatData();
}
getCatData(){
this.woocommerce = WC({
url:'http://www.example.com/',
consumerKey: 'ck_7dfe0aec65ahgcdhgcdhcdhf36288d1fa2e4c01',
consumerSecret: 'cs_da53e5b228eb6235bshhcskhc7a68541ad809743'
});
this.woocommerce.getAsync("products/categories").then((data)=>{
console.log(JSON.parse(data.body).product_categories);
this.categories = JSON.parse(data.body).product_categories;
},(err)=>{
console.log(err);
})
}
}
Home.html-
<ion-header>
<ion-navbar color="header">
<ion-buttons left>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons right>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>
KAAIROS EXPORTS
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!-- slider -->
<ion-card>
<ion-slides loop="true" autoplay="false" pager>
<ion-slide *ngFor= "let number of [1,2,3,4,5]"><img src="./assets/img/{{number}}.jpg"/></ion-slide>
</ion-slides>
</ion-card>
<!-- end-slider -->
<!-- <ion-grid> Hi this is second line
</ion-grid> -->
<ion-item *ngFor="let category of categories">
<h2> {{ category.name }} </h2>
</ion-item>
</ion-content>
app.component.ts-
import { TabsPage } from './../pages/tabs/tabs';
import { HomePage } from './../pages/home/home';
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
//import { Menu } from '../pages/menu/menu';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
// rootPage: any = Menu;
rootPage = TabsPage;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
// go_to_home(){
// this.nav.setRoot(HomePage);
// }
}
app.html-
<ion-menu side="left" [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- <ion-list>
<!-- <ion-item (click)="go_to_home()" menuClose>
Home
</ion-item> -->
<!-- <ion-item (click)="go_to_about()" menuClose>
About
</ion-item> -->
<!-- <ion-item (click)="go_to_contact()" menuClose>
Contact Us
<!-- </ion-item> -->
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>
app.module:-
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { AboutusPage } from '../pages/aboutus/aboutus';
import { ContactusPage } from '../pages/contactus/contactus';
import { CategoryPage } from '../pages/category/category';
import { ProductsByCategoryPage } from '../pages/products-by-category/products-by-category';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { WooCommerceProvider } from '../providers/woocommerce/woocommerce';
import { HttpModule } from '#angular/http';
#NgModule({
declarations: [
MyApp,
HomePage,
TabsPage,
AboutusPage,
ContactusPage,
CategoryPage,
//ProductListPage,
ProductsByCategoryPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp,{
mode:'ios'
}),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
TabsPage,
AboutusPage,
ContactusPage,
CategoryPage,
ProductsByCategoryPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WooCommerceProvider
]
})
export class AppModule {}

Answer 1

Simply call the ChangeDetectorRef after successfull API call to refresh the changes in UI. PFB the sample code where we have triggered change detector on subscribe call. You can check the working version here
import { Component, ViewChild, ChangeDetectorRef } from '#angular/core';
import { NavController, Content } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild(Content) content: Content;
Arr = Array; //Array type captured in a variable
num:number = 1000;
toolbar_color: string;
constructor(public navCtrl: NavController, public ref : ChangeDetectorRef) {
this.toolbar_color="secondary";
}
changeColor(){
this.toolbar_color="primary";
this.ref.detectChanges();
}
ionViewDidLoad() {
//this.content.enableJsScroll();
this.content.ionScrollEnd.subscribe(() => {
this.changeColor();
});
}
}

Answer 2

This is because your data is asynchronously loaded. The view has already been rendered by the time your data arrives.
One way to fix this is to add some kind of "refresh" method and call it when you receive the data (e.g., in .getAsync().then(...)).