在加载之前在视图中加载数据[重复]

Question

我有一个问题，我正在使用 Ionic 2 和 angular 2。

我必须在视图中显示一些数据，但我从同一页面中的 API 获取这些数据，因此当我尝试在视图中显示它们时，它们尚未定义。获取这些数据后如何等待加载视图？

我尝试过 onPageWillEnter 但它不起作用。

提前谢谢你。

Answer 1

你可以用*ngIf包装你的模板

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

设置data时，会显示内容。

您还可以使用安全导航或 Elvis 运算符来避免错误消息

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

当data 为null 时避免错误消息

Answer 2

提供者允许您从服务器获取数据 生成：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);
    }
}

之后使用 Temple 和 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>