Невозможно передать значение из службы в компонент
Я учусь использовать Angular.
Я создал API для Spring-boot и создал несколько компонентов в Angular для их просмотра, но ничего не могу просмотреть.
Я создал в angular службу для выполнения всех вызовов API.
В сервисе я создал массив типа Any и оставил его пустым.
luoghi : any[] = [];
затем я делаю запрос GET и в методе присваиваю значение ответа массиву:
getAllLuoghi(){
this.http.get("http://localhost:9595/oota-reg/api/luoghi/all").subscribe({
next : (response : any) =>{
console.info(response);
this.luoghi = response;
},
error : (error) => {
console.info("Something went wrong..", error);
}
})
}
Теперь я создал еще два компонента: один — «Домой», а другой — «Карточка», базовые вещи.
Домашний компонент отвечает за циклическое переключение всех элементов массива и для каждого элемента выводит на экран карту компонентов карты.
<div class = "flex justify-center flex-wrap gap-5">
@for (item of cards; track $index) {
<app-card></app-card>
}@empty {
<p>none</p>
}
</div>
Но вот в чем проблема в файле home.comComponent.ts, я хотел создать массив с именем card,
внедрить Сервис и передать картам значение массива, присутствующего в Сервисе, после вызова GET.
private serviceLuoghi : LuoghiServiceService = inject(LuoghiServiceService);
public cards : any[] = [];
ngOnInit(): void {
this.serviceLuoghi.getAllLuoghi();
this.cards= this.serviceLuoghi.luoghi
console.info(this.cards);
}
Но массив карт пуст.
Как я могу передать данные?
Ответы 1
Код внутри подписки является асинхронным (ждет завершения API), внешний код синхронен (не ждет), поэтому я надеюсь, что вы видите проблему: мы получаем доступ к свойству до завершения API. Таким образом, решение этой проблемы состоит в том, чтобы переместить код назначения в подписку, чтобы он был назначен после завершения вызова API.
getAllLuoghi(){
return this.http.get("http://localhost:9595/oota-reg/api/luoghi/all")
}
Теперь сервис возвращает наблюдаемое, на которое мы можем подписаться внутри компонента, лучше подписываться на наблюдаемые внутри компонента, а не на сервисы.
ngOnInit(): void {
this.serviceLuoghi.getAllLuoghi().subscribe({
next : (response : any) =>{
console.info(response);
this.serviceLuoghi.luoghi = response; // can remove if not needed!
this.cards= response;
console.info(this.cards);
},
error : (error) => {
console.info("Something went wrong..", error);
}
})
}
Ооо, теперь я вижу, спасибо :)
Пожалуйста, отредактируйте заголовок вопроса, чтобы описать вашу проблему или вопрос, который вы задаете. Ваш текущий заголовок представляет собой просто повторение теговой информации и некоторых бесполезных слов, которые вообще не несут никакой информации о вопросе. Название должно быть достаточно ясным и информативным, чтобы будущий пользователь сайта, просматривающий список результатов поиска, знал, о чем идет речь. Ваше нынешнее звание ни о чём не говорит. Рекомендации по написанию хорошего заголовка см. в разделе Как спрашивать.