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是我們觸發變更檢測器的示例代碼。 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(); 
    }); 
} 

}