API 데이터가 처음로드되지 않습니다. ionic2, angular2

Question

지난 며칠 동안 고생하고 있습니다. ionic2/3 angular 2 및 wordpress를 데이터 용으로 사용하고 있습니다. 처음로드 할 때 홈 페이지에서 카테고리 데이터를로드하려고 시도하지만 실제로 표시되지 않습니다. 브라우저에서 제대로오고 메뉴 단추를 클릭하면 전체 데이터가 제대로 표시됩니다. 나는 모든 블로그를 확인했지만 적절한 해결책을 얻지 못했습니다. 누구든지 동일한 문제가 있고 해결 된 경우 도와주세요. 미리 감사드립니다. 여기에 코드를 첨부합니다.

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

데이터가 비동기 적으로로드되기 때문입니다. 데이터가 도착할 때까지 뷰가 이미 렌더링되었습니다.

이 문제를 해결하는 한 가지 방법은 일종의 '새로 고침'방법을 추가하고 데이터를 수신 할 때이를 호출하는 것입니다 (예 : .getAsync().then(...)).

Answer 2

성공한 API 호출 후에 ChangeDetectorRef를 호출하여 UI의 변경 사항을 새로 고치기 만하면됩니다. PFB 우리가 subscribe 콜에서 변경 감지기를 트리거 한 샘플 코드. 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(); 
    }); 
} 

}