Как вернуть объект из сервиса в компонент в угловой - PullRequest
Новая
       49

Как вернуть объект из сервиса в компонент в угловой

0 голосов
/ 10 апреля 2019

Я хочу получить доступ к определенному json в ngOninit.Итак, у меня есть идентификатор по нажатию на кнопку редактирования, и с помощью этого идентификатора я получаю полный объект из базы данных, такой как имя формы, форма 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);
    }

, например, как я могуполучить json в ngOnInit.

Редактировать 

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 ]

2 голосов
/ 10 апреля 2019

Это не то, как вы должны подписываться на наблюдаемые.Вы должны прочитать документацию / учебник , когда дело доходит до обработки асинхронных операций (таких как HTTP-запросы).Между тем, именно так мы можем исправить вашу проблему.

В вашем сервисе 

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 голос
/ 10 апреля 2019

Вы подписываетесь не на 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);
  });
}
0 голосов
/ 10 апреля 2019

Не подписывайтесь внутри сервиса, подписывайтесь на insdie componentet onitit. 

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