html - NgFor visar inte arrayen jag ger honom

Jag utvecklar en app för personer som arbetar på restauranger, jag har en instrumentpanel där jag visar dem några statistik om deras bokningar, där det finns en del som visar de 5 kunderna med flest bokningar under en given period.

Jag skickar en array med 5 kunder till min *ngFor men ingen av dem visas.

En del av mitt typescript :

    for (let i = 0; i < topClient.length; i++) {
      this.clientService.retrieve(topClient[i]).subscribe(res => {
        this.topUsers.push(res.body);
      });
    }

Min HTML :

<div class="flex flex w-full" *ngFor="let client of topUsers">
      <p class="w-64">{{ client.last_name }} {{ client.first_name }}</p>
</div>

Jag förväntar mig att resultatet blir en lista över mina 5 kunder, med vetskap om att console.log(this.topUsers) returnerar de förväntade 5 kunderna.

Tack för hjälpen :')

REDIGERA: Här är console.log för TopUsers och konsolfel efter Tonys ändringar: 1

Svar #1

Kan du ställa in dina data på det här sättet för att se om det fungerar

this.topUsers = res.body;

Och i din mall

<div class="flex flex w-full" *ngFor="let client of topUsers">
      <p class="w-64">{{ client.last_name }} {{ client.first_name }}</p>
</div>

Om det inte är fallet, kontrollera om du har importerat CommonModule i din app.module.ts eller inte

Svar #2

Försök att konvertera det till en array.

this.topUsers = [res.body]

Kontrollera också din modul om du har importerat 'CommonModule'.