负载数据

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>