Angular2: come caricare i dati prima di rendere il componente?

Sto tentando di caricare un evento dalla mia API prima che il componente venga sottoposto a rendering. Attualmente sto usando il mio servizio API che chiamo dalla funzione ngOnInit del componente.

Il mio componente EventRegister :

 import {Component, OnInit, ElementRef} from "angular2/core"; import {ApiService} from "../../services/api.service"; import {EventModel} from '../../models/EventModel'; import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router'; import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common'; @Component({ selector: "register", templateUrl: "/events/register" // provider array is added in parent component }) export class EventRegister implements OnInit { eventId: string; ev: EventModel; constructor(private _apiService: ApiService, params: RouteParams) { this.eventId = params.get('id'); } fetchEvent(): void { this._apiService.get.event(this.eventId).then(event => { this.ev = event; console.log(event); // Has a value console.log(this.ev); // Has a value }); } ngOnInit() { this.fetchEvent(); console.log(this.ev); // Has NO value } } 

Il mio modello EventRegister

  Hi this sentence is always visible, even if `ev property` is not loaded yet 
I should be visible as soon the `ev property` is loaded. Currently I am never shown. {{event.id }}

Il mio servizio API

 import "rxjs/Rx" import {Http} from "angular2/http"; import {Injectable} from "angular2/core"; import {EventModel} from '../models/EventModel'; @Injectable() export class ApiService { constructor(private http: Http) { } get = { event: (eventId: string): Promise => { return this.http.get("api/events/" + eventId).map(response => { return response.json(); // Has a value }).toPromise(); } } } 

Il componente viene ngOnInit rendering prima che la chiamata all’API nella funzione ngOnInit venga eseguita recuperando i dati. Quindi non vedo mai l’ID dell’evento nel mio modello di visualizzazione. Quindi sembra che questo sia un problema ASYNC. Mi aspettavo che il binding del componente ev ( EventRegister ) EventRegister funzionare dopo che la proprietà ev era stata impostata. Purtroppo non mostra il div contrassegnato con *ngIf="ev" quando la proprietà viene impostata.

Domanda: Sto usando un buon approccio? Altrimenti; Qual è il modo migliore per caricare i dati prima che il componente inizi a eseguire il rendering?

NOTA: l’approccio ngOnInit viene utilizzato in questo tutorial angular2 .

MODIFICARE:

Due possibili soluzioni. Per prima cosa è stato quello di fetchEvent e utilizzare semplicemente il servizio API nella funzione ngOnInit .

 ngOnInit() { this._apiService.get.event(this.eventId).then(event => this.ev = event); } 

Seconda soluzione Come la risposta data.

 fetchEvent(): Promise { return this._apiService.get.event(this.eventId); } ngOnInit() { this.fetchEvent().then(event => this.ev = event); }