घटक रेंडर होने से पहले मैं अपने API से एक ईवेंट लोड करने का प्रयास कर रहा हूं। वर्तमान में मैं अपनी एपीआई सेवा का उपयोग कर रहा हूं जिसे मैं घटक के एनकोऑनिट फ़ंक्शन से कॉल करता हूं।
मेरा 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
}
}मेरा EventRegisterटेम्प्लेट
<register>
Hi this sentence is always visible, even if `ev property` is not loaded yet
<div *ngIf="ev">
I should be visible as soon the `ev property` is loaded. Currently I am never shown.
<span>{{event.id }}</span>
</div>
</register>मेरी एपीआई सेवा
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<EventModel> => {
return this.http.get("api/events/" + eventId).map(response => {
return response.json(); // Has a value
}).toPromise();
}
}
}ngOnInitडेटा प्राप्त करने के लिए फ़ंक्शन में API कॉल करने से पहले घटक प्रदान किया जाता है। इसलिए मुझे अपने व्यू टेम्प्लेट में ईवेंट आईडी देखने को कभी नहीं मिला। तो ऐसा लगता है कि यह एक ASYNC समस्या है। मुझे उम्मीद थी कि संपत्ति के सेट होने के बाद ev( EventRegisterकुछ) काम करने के लिए ( घटक) की बाध्यता होगी ev। दुर्भाग्य से यह प्रदर्शित नहीं करता है divके साथ चिह्नित *ngIf="ev"जब गुण सेट हो जाता है।
प्रश्न: क्या मैं एक अच्छे दृष्टिकोण का उपयोग कर रहा हूँ? अगर नहीं; घटक को रेंडर करने से पहले डेटा लोड करने का सबसे अच्छा तरीका क्या है?
नोट:ngOnInit दृष्टिकोण इस में प्रयोग किया जाता है angular2 ट्यूटोरियल ।
संपादित करें:
दो संभव उपाय। पहले समारोह fetchEventमें खाई और बस एपीआई सेवा का उपयोग ngOnInitकरना था।
ngOnInit() {
this._apiService.get.event(this.eventId).then(event => this.ev = event);
}दूसरा उपाय। जैसे उत्तर दिया गया।
fetchEvent(): Promise<EventModel> {
return this._apiService.get.event(this.eventId);
}
ngOnInit() {
this.fetchEvent().then(event => this.ev = event);
}
fetchEventफ़ंक्शन को हटा दिया और केवलapiService.get.eventफ़ंक्शन को अंदर रखाngOnInitऔर जैसा कि मैंने इरादा किया था, यह काम किया। धन्यवाद! जैसे ही यह मुझे अनुमति देता है मैं आपको उत्तर स्वीकार कर लूंगा।