如何从角度将对象从服务返回到组件

时间:2019-04-10 06:15:57

标签: angular angular2-routing angular2-forms angular7 angular-forms

我想访问ngOninit中的特定json。因此,我在单击编辑按钮时获得了ID,并借助该ID,我正在从数据库中获取完整的对象,如表单名称,表单json等。因此,从服务中,我想将该json返回给ngOninit。

这是服务。

    GetFormById (id: number) {
    return this.httpClient.get<FormTemplate[]>(this.API_URL + 
    "GetFormTemplate/" + id).subscribe(data => {
      console.log(data);
      return data;
    });
    }

在控制台中,我从已保存的数据库中获取完整的对象。

这是组成部分

    ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    var json = this.dataService.GetFormById(+id);
    }

就像我如何在ngOnInit中获取json。

修改

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);
  });
}

就像我临时得到的json一样,我都希望以var formData传递它。

3 个答案:

答案 0 :(得分:2)

这不是您应该从可观察对象订阅的方式。在处理异步操作(例如HTTP请求)时,您应该阅读documentation / tutorial。同时,这就是我们可以解决您的问题的方式。

为您服务

GetFormById (id: number) {
  return this.httpClient.get<FormTemplate[]>(`${this.API_URL}GetFormTemplate/${id}`);
}

在您的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;
  })
}

答案 1 :(得分:1)

您没有在服务类中订阅Observable,而是在组件中订阅了

在服务中,只需从服务方法中返回Observable

GetFormById (id: number): Observable<FormTemplate[]>{
    return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}

您在组件中订阅了服务方法返回的Observable

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.dataService.GetFormById(+id).subscribe(data => {
    console.log(data);
  });
}

答案 2 :(得分:0)

不要订阅内部服务,请先启动insdie componet。

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);
    })
}