[英]How to return object from service to component in angular
I want to access particular json in ngOninit.我想在 ngOninit 中访问特定的 json。 So i have id on click in edit button and with the help of that id i am getting complete object from database like form name, form json which etc. So from the service i want to return that json to ngOninit.
所以我在单击编辑按钮时有 id,在该 id 的帮助下,我从数据库中获取完整的对象,如表单名称、表单 json 等。所以我想从服务中将该 json 返回给 ngOninit。
Here is service.这里是服务。
GetFormById (id: number) {
return this.httpClient.get<FormTemplate[]>(this.API_URL +
"GetFormTemplate/" + id).subscribe(data => {
console.log(data);
return data;
});
}
In console i am getting complete object from database which i have save.在控制台中,我从我保存的数据库中获取完整的对象。
Here is component这是组件
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
var json = this.dataService.GetFormById(+id);
}
like how can i get json in ngOnInit.就像我怎样才能在 ngOnInit 中获取 json。
Edit编辑
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(+id).subscribe(response => {
console.log(response);
const temp = response['TemplateJson'];
})
initJq();
var formData = '[{"type":"header","subtype":"h1","label":"Inquiry"},{"type":"paragraph","subtype":"p","label":"Paragraph content"},{"type":"text","label":"First name","name":"text - 1554220470561","value":"Vipul","subtype":"text"},{"type":"date","label":"Date Field","className":"form - control","name":"date - 1554220484446","value":"2019 - 04 - 25"},{"type":"button","label":"Send Inquiry","subtype":"button","className":"btn btn - primary","name":"button - 1554220480284","style":"primary"}]';
this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });
// Sample code to handle promise to get for data on page load directly
this.formBuilder.promise.then(formBuilder => {
console.log(formBuilder.formData);
});
}
like whatever json i got in temp i want to pass it in var formData.就像我在 temp 中得到的任何 json 一样,我想在 var formData 中传递它。
This is not how you should subscribe from observables.这不是您应该如何订阅可观察对象。 You should read up the documentation / tutorial when it comes to handling asynchronous operations (such as HTTP requests).
在处理异步操作(例如 HTTP 请求)时,您应该阅读文档/教程。 Meanwhile, this is how we can fix your issue.
同时,这是我们解决您的问题的方法。
On your service,为您服务,
GetFormById (id: number) {
return this.httpClient.get<FormTemplate[]>(`${this.API_URL}GetFormTemplate/${id}`);
}
On your component.ts, we return the observable value by calling the subscribe()
method.在您的 component.ts 上,我们通过调用
subscribe()
方法返回可观察值。
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(id).subscribe(response => {
console.log(response);
const templateObj = response.TempleteJson;
})
}
You don't subscribe to the Observable
in the service class, but instead in the component:您不在服务类中订阅
Observable
,而是在组件中订阅:
In the service, just return the Observable
from your service method:在服务中,只需从您的服务方法返回
Observable
:
GetFormById (id: number): Observable<FormTemplate[]>{
return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}
In the component you subscribe to the Observable
returned by the service method:在您订阅服务方法返回的
Observable
的组件中:
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(+id).subscribe(data => {
console.log(data);
});
}
Don't subscribe inside service, subscribe inside component onInit.不要订阅内部服务,订阅内部组件 onInit。
GetFormById (id: number) {
return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(+id).subscribe(data => {
console.log(data);
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.