load data in the view before loading it [duplicate] - ionic-framework

Question

This question already has an answer here:
Error if don't check if {{object.field}} exists
(1 answer)
Closed 6 years ago.
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.

Answer 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

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