Как вернуть объект из службы в компонент в angular
Я хочу получить доступ к определенному json в ngOninit. Итак, у меня есть идентификатор при нажатии кнопки редактирования, и с помощью этого идентификатора я получаю полный объект из базы данных, такой как имя формы, форма json, которая и т. д. Итак, из службы я хочу вернуть этот json в ngOninit.
Вот сервис.
GetFormById (id: number) {
return this.httpClient.get<FormTemplate[]>(this.API_URL +
"GetFormTemplate/" + id).subscribe(data => {
console.info(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.info(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.info(formBuilder.formData);
});
}
как и любой json, который я получил во временном файле, я хочу передать его в var formData.
Ответы 3
Вы не подписываетесь на 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.info(data);
});
}
Не подписывайтесь внутри сервиса, подписывайтесь внутри компонента 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.info(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"} так как я могу получить доступ TempleteJson из этого объекта на ngOnit
Это не то, как вы должны подписываться на наблюдаемые. Вам следует прочитать документация/руководство, когда дело доходит до обработки асинхронных операций (таких как 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.info(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"} так как я могу получить доступ TempleteJson из этого объекта на ngOnit
@RonakDumaniya хорошо, ты что-то возвращаешь. Хорошо, что именно вы хотите сделать с данными JSON? Имейте в виду, что вы можете рассматривать его как объект JavaScript. (например, ответ.Id)
могу ли я сохранить его в переменной, например var json = response.TempleteJson
Да, вы можете сохранить объект как переменную. Сделайте что-то вроде const templateObj = response.TempleteJson; Чтобы проверить, работает ли это, вы можете запустить console.info(templateObj)
Я получаю сообщение об ошибке, например, что TempleteJson не существует в FormTemplete[]
Попробуйте использовать response['TempleteJson']?
Вы уверены, что TemplateJson это правильное имя? Вложен ли он в другой объект?
const temp = ответ['TemplateJson']; как я могу получить доступ к этому временному файлу вне подписки, например, я хочу сохранить этот временный файл в другом var, который находится вне подписки
Вы не можете. Вы должны обрабатывать это в блоке subscribe. Вы можете либо вернуть его позже, либо связать его с другими методами RxJS.
Пожалуйста, помогите мне, как я могу вернуться? если у вас есть ссылка, пожалуйста, дайте мне
Подождите, просто чтобы проверить, вам нужен TemplateJson немедленно? Или он используется где-то позже? Можете ли вы рассказать мне больше, когда он используется?
У меня есть код редактирования, поэтому вы можете дать мне решение на его основе.
Давайте продолжить обсуждение в чате.
пожалуйста, проверьте эту проблему, из-за этого я застрял, и это последняя проблема
Я получаю этот объект в консоли {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"} так как я могу получить доступ TempleteJson из этого объекта на ngOnit