html - NgFor 没有显示我给它的数组

我正在为餐厅工作人员开发一款应用，我有一个仪表板，在那里我向他们展示一些关于预订的统计数据，其中有一部分显示在某一特定时间段内预订最多的5位客户。

我将一个包含5个客户端的数组传给我的 *ngFor，但它们都没有显示。

我的 TypeScript 的一部分：

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

我的 HTML：

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

我期望输出是我的5个客户的列表，知道 console.log(this.topUsers) 返回的是预期的5个客户。

谢谢你的帮助 :')

编辑：以下是 Tony 更改后的 TopUsers 的 console.log 和控制台错误：1

答案＃1

你能把你的数据设置成这样看看是否可行吗

this.topUsers = res.body;

在你的模板里

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

如果不是这种情况，请检查您是否在 app.module.ts 中导入了 CommonModule

答案＃2

尝试将其转换为数组。

this.topUsers = [res.body]

同时，检查你的模块是否已经导入了'CommonModule'。