загрузки данных в представлении перед загрузкой

Question

У меня есть проблема, я работаю с ионными 2 и угловой 2.

Я должен показать некоторые ДАННЫЕ в представлении, но я получаю эти ДАННЫЕ от API в том же поэтому, когда я пытаюсь показать их в представлении, они еще не определены. Как я могу ждать, чтобы загрузить представление после получения этих данных?

Я пробовал onPageWillEnter, но он не работает.

Заранее спасибо.

Answer 1

Вы можете обернуть шаблон с *ngIf

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

Когда data установлен, то содержимое будет показано.

Вы также можете использовать охранные навигации или оператор Элвиса, чтобы избежать сообщений об ошибках

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

, чтобы избежать сообщений об ошибке при data является null

Answer 2

пытается обернуть ваш взгляд внутри нг-если, как это

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

и в контроллере объявить в области глобальную переменную, которая будет установлена ​​в true, как только ваш асинхронный запрос возвращает значение.

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>