負載數據

Question

我有一個問題，我與離子2個工作和角2

我必須展示在視圖中一些DATAS但是我在同一個得到一個API這些DATAS頁面，所以當我嘗試在視圖中顯示它們時，它們尚未定義。如何在獲取這些數據後等待加載視圖？

我試過onPageWillEnter但它不起作用。

預先感謝您。

Answer 1

您可以*ngIf

template: ` 
<div *ngIf="data"> 
    ... <!-- content --> 
</div>` 

當data設置，內容將顯示在包裝你的模板。

您還可以使用安全的導航或Elvis操作符來避免錯誤信息

template: `<div>{{data?.someProp}}</div>` 

，以避免出現錯誤消息時data是null

Answer 2

嘗試包內視圖NG-如果這樣

<div ng-if="dataArrived" container-fluid"> 
    <div ng-view></div> 
</div> 

並且在你的控制器中聲明一個全局變量，該變量一旦被設置爲真，你的異步請求返回一個值。

Answer 3

提供商允許您從服務器獲取數據 產生：ionic generate provider MyProvider --ts

@Injectable() 
export class MenuProvider { 
    data: any = null; 

    constructor(public http: Http) { } 

    load() { 
     if (this.data) { 
      // already loaded data 
      return Promise.resolve(this.data); 
     } 

     // don't have the data yet 
     return new Promise(resolve => { 
      // We're using Angular Http provider to request the data, 
      // then on the response it'll map the JSON data to a parsed JS object. 
      // Next we process the data and resolve the promise with the new data. 
      this.http.get('asset/menu.json') 
       .map(res => res.json()) 
       .subscribe(data => { 
        // we've got back the raw data, now generate the core schedule data 
        // and save the data for later reference 
        this.data = data; 
        resolve(this.data); 
       }); 
     }); 
    } 
} 

menu.ts

import {MenuProvider} from "../../providers/menu-provider/menu-provider"; 
import {Component, OnInit} from '@angular/core'; 
import {IONIC_DIRECTIVES, NavController, Modal} from 'ionic-angular'; 
import {AccountHistoryPage} from "../../pages/account-history/account-history"; 

/* 
    Generated class for the MenuComponent component. 

    See https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html 
    for more info on Angular 2 Components. 
*/ 
@Component({ 
    selector: 'menu-component', 
    templateUrl: 'build/components/menu-component/menu-component.html', 
    directives: IONIC_DIRECTIVES, 
    providers: [MenuProvider] 
}) 
export class MenuComponent { 
    // menu object 
    jsonMenu: any; 
    constructor(public nav: NavController, menuProvider: MenuProvider) { 

     // TODO: show progress 
     menuProvider.load().then(data => { 
      // TODO: turn off menu load json progress 

      // data after proccessed. 
      this.jsonMenu = data; 
      console.log(this.jsonMenu); 
     }, err => console.log(err)); 
    } 

    itemClick(moduleNumber: number) { 
     console.log(moduleNumber); 

     let page: any = null; 
     if (moduleNumber == 210102) { 
      page = Modal.create(AccountSourcePage); 
     } 

     if (moduleNumber == 210103) { 
      page = Modal.create(AccountBeneficiatyPage); 
     } 

     if (moduleNumber == 210101) { 
      page = Modal.create(AccountHistoryPage); 
     } 
     this.nav.present(page); 
    } 
} 

是用寺廟與ngFor，ngIf ....後顯示

<ion-item *ngFor="let menu of jsonMenu"> 
    <!-- title --> 
    <div class="khungtieude"> 
     <span class="tieudechinh">{{menu.title}}</span> 
     <span class="gachgiua"></span> 
    </div> 

    <!-- arrows --> 
    <div class="arrow-container" [hidden]="!(menu.contains.length > 1)"> 
     <ion-icon class="arrow-back" name="ios-arrow-back"></ion-icon> 
     <ion-icon class="arrow-forw" name="ios-arrow-forward"></ion-icon> 
    </div> 

    <!-- slide --> 
    <!-- using template instead of fix code, i will add later --> 
    <ion-slides loop> 
     <!-- page 1 of side --> 
     <!-- i need loop in total/3 + (total%3==0? 0 : 1) --> 
     <ion-slide *ngFor="let temp of menu.contains"> 
      <ion-row style="padding-top: 10px;"> 
       <ion-col width-33 center *ngFor="let menuItem of temp.page" (click)="itemClick(menuItem.moduleId)"> 
        <span class="icon-cknb main-menu-ic"></span> 
        <br/> 
        <div class="main-menu-text"> 
         {{menuItem.displayName}} 
        </div> 
       </ion-col> 
      </ion-row> 
     </ion-slide> 
    </ion-slides> 
</ion-item>