উপাদানটি রেন্ডার হওয়ার আগে আমি আমার এপিআই থেকে একটি ইভেন্ট লোড করার চেষ্টা করছি। বর্তমানে আমি আমার API পরিষেবাটি ব্যবহার করছি যা আমি উপাদানটির ngOnInit ফাংশন থেকে কল করি।
আমার 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>আমার 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<EventModel> => {
return this.http.get("api/events/" + eventId).map(response => {
return response.json(); // Has a value
}).toPromise();
}
}
}ফাংশনটিতে API কল করার আগে ngOnInitডেটা আনার আগে উপাদানটি রেন্ডার হয়ে যায় । সুতরাং আমি কখনই আমার ভিউ টেমপ্লেটে ইভেন্ট আইডি দেখতে পাচ্ছি না। সুতরাং দেখে মনে হচ্ছে এটি একটি এএসআইএনসি সমস্যা। আমি সম্পত্তি নির্ধারিত হওয়ার পরে ev( EventRegisterউপাদান) বাঁধাই করে কিছু কাজ evকরার আশা করেছি। দুঃখজনকভাবে সম্পত্তিটি সেট হওয়ার divসাথে এটি চিহ্নিত চিহ্নটি দেখায় না *ngIf="ev"।
প্রশ্ন: আমি কি ভাল পন্থা ব্যবহার করছি? যদি না; উপাদানটি রেন্ডার শুরু হওয়ার আগে ডেটা লোড করার সর্বোত্তম উপায় কী?
উল্লেখ্য:ngOnInit পদ্ধতির এই ব্যবহার করা হয় angular2 টিউটোরিয়াল ।
সম্পাদনা করুন:
দুটি সম্ভাব্য সমাধান। প্রথমটি ছিল খনন করা fetchEventএবং ngOnInitফাংশনে কেবলমাত্র API পরিষেবাটি ব্যবহার করা ।
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রেখেছি এবং এটি আমার উদ্দেশ্য হিসাবে কাজ করেছে। ধন্যবাদ! আমি আপনাকে উত্তর হিসাবে তাড়াতাড়ি আপনি উত্তর গ্রহণ করব।