Hej, mam taki typ Element w swojej aplikacji i serwis zwracające elementy po 'id'. Nie zwraca wszystkich naraz (nie ma takiej metody).
Chcę go teraz wyświetlić w widoku. Kod w pliku .ts mojego komponentu.
Teraz takie przypadki:
Przypadek 1:
element: Element;
// dalej kod
//w konstruktorze
this.utilsService.getElement(1).subscribe(data => {
this.element = data;
});
Mogę bez problemu wyświetlić w widoku element.
Przypadek 2:
elements: Element[];
// dalej kod
//w konstruktorze
for (let i = 1; i <= 5; ++i) {
this.utilsService.getElement(i).subscribe(data => {
this.elements.push(data);
});
}
Nic się nie da wyświetlić, tablica jakby była pusta. Czasem po kompilacji zmula apkę na tej podstronie.
Przypadek 3:
elements: Element[];
// dalej kod
//w konstruktorze
this.utilsService.getElement(1).subscribe(data => {
this.elements.push(data);
});
this.utilsService.getElement(2).subscribe(data => {
this.elements.push(data);
});
this.utilsService.getElement(3).subscribe(data => {
this.elements.push(data);
});
this.utilsService.getElement(4).subscribe(data => {
this.elements.push(data);
});
this.utilsService.getElement(5).subscribe(data => {
this.elements.push(data);
});
Mogę bez problemu wyświetlić elementy w widoku HTML. Działa ok.
Tylko dlaczego? Dlatego, że metoda subscribe jest asynchroniczna i ma jakieś problemy z petlą? Jak przerobić przypadek 2, aby nie musieć ręcznie duplikować kodu dla wielu elementów, ale żeby działało?