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

Posted 2023-03-04

【中文标题】如何以角度将对象从服务返回到组件

【英文标题】：How to return object from service to component in angular

【发布时间】：2019-08-31 12:23:58

【问题描述】：

我想在 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);
  );

就像我在 temp 中得到的任何 json 一样，我想在 var formData 中传递它。

【参考方案1】：

这不是你应该订阅 observables 的方式。在处理异步操作（例如 HTTP 请求）时，您应该阅读documentation/tutorial。同时，这也是我们可以解决您的问题的方法。

为您效劳，

GetFormById (id: number) 
  return this.httpClient.get<FormTemplate[]>(`$this.API_URLGetFormTemplate/$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;
  )

【讨论】：

我在控制台中得到这个对象 Id: 24, TemplateName: "school management", TemplateJson:"[↵↵"type": "header",↵"subtype": "h1" ,↵"lab..."button-1554701441337",↵"style":"primary"↵↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00: 00" 那么我如何从 ngOnit 上的这个对象访问 TempleteJson

@RonakDumaniya 很好，你正在返回一些东西。好的，您到底想对 JSON 数据做什么？请记住，您可以将其视为 javascript 对象。 （例如 response.Id）

我可以将它存储在变量中，比如 var json = response.TempleteJson

是的，您可以将对象存储为变量。执行const templateObj = response.TempleteJson; 之类的操作要测试它是否有效，您可以运行console.log(templateObj)

我收到了 FormTemplete[] 中不存在 TempleteJson 之类的错误

【参考方案2】：

您不是在服务类中订阅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);
  );

【讨论】：

我在控制台中得到这个对象 Id: 24, TemplateName: "school management", TemplateJson:"[↵↵"type": "header",↵"subtype": "h1" ,↵"lab..."button-1554701441337",↵"style":"primary"↵↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00: 00" 那么我如何从 ngOnit 上的这个对象访问 TempleteJson

【参考方案3】：

不要订阅内部服务，订阅内部组件 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);
    )

【讨论】：

我在控制台中得到这个对象 Id: 24, TemplateName: "school management", TemplateJson:"[↵↵"type": "header",↵"subtype": "h1" ,↵"lab..."button-1554701441337",↵"style":"primary"↵↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00: 00" 那么我如何从 ngOnit 上的这个对象访问 TempleteJson