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

成功调用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();
    });
}

}

Answer 2

这是因为您的数据是异步加载的。视图已经在您的数据到达时呈现。

解决此问题的一种方法是添加某种“刷新”方法，并在收到数据时调用它（例如，在.getAsync().then(...)中）。

API数据首先没有加载ionic2，angular2

2 个答案: