Angular - subscribe dlaczego nie działa

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?

Do wyświetlania wszystkich elementów zwykle implementuje się jedną metodę w serwisie, np. getElements(). Wtedy do API leci tylko jedno zapytanie, zamiast kilku.