load data in the view before loading it

Question

I have a problem, I am working with Ionic 2 and angular 2.

I have to show some datas in a view but I get these datas from an API in the same page so when I try to show them in the view, they are undefined yet. How can I wait to load the view after getting these datas?

I have tried onPageWillEnter but it does not work.

Thank you in advance.

Solution 1

You can wrap your template with *ngIf

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

When data is set, the content will be shown.

You can also use the safe-navigation or Elvis operator to avoid error messages

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

to avoid error messages when data is null

Solution 2

provider allow you get data from server generate: 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);
    }
}

after that use temple with ngFor, ngIf.... to display

<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>