NgFor 没有显示数组 ii 给他答案

【问题标题】：NgFor isn't displaying the array ii give himNgFor 没有显示数组 ii 给他
【发布时间】：2019-12-22 14:45:09
【问题描述】：

我正在为在餐馆工作的人开发一个应用程序，我有一个仪表板，我在其中向他们展示了一些关于他们的预订的统计信息，其中有一部分显示了在给定时期内预订最多的 5 位客户。

我向我的 *ngFor 发送了一个包含 5 个客户端的数组，但它们都没有显示。

我的打字稿的一部分：

    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 个客户端。

感谢您的帮助:')

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

【问题讨论】：

嘿！ topClient 是什么？我认为如果您的服务中有 getClients() 方法会更容易。此方法应返回 Client 类型的 Observable。然后，在你的组件中，你只需要做这样的事情：this.clients$ = this.clientService.getClients()
您的模板中是否有一个元素包含#topUsers？
@Flacype 查看此示例 http-call in for loop
您能给我们看一个res.body 的console.log，即单个对象吗？
只是一个广告。如果你需要一个 Observables 循环，使用 forkJoin

标签： html angular typescript

【解决方案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

【讨论】：

那没用，我得到一个控制台错误，说 ngFor 只能绑定到数组，我的 console.log(TopUsers) 看起来像一个普通数组 ( (5) [{…}, { …}，{…}，{…}，{…}]）所以我想这不是因为它吗？我在另一个组件的其他地方使用了 ngFor，它工作得非常好：/
您可以截屏更新您的问题吗？
你可以试试 {{topUsers | json}} 并与我们分享结果
{{topUsers | json}} 返回每个 clientObject 的完整工作 json 以及通过 ForeignKey 与之相关的每个对象，可悲的是，我在这里复制粘贴它太长了：/
@TonyNgo，随着您的更新，我得到了与您的答案的第一个版本相同的错误，它无法迭代对象并需要一个数组

【解决方案2】：

尝试将其转换为数组。

this.topUsers = [res.body]

另外，检查您的模块是否已导入“CommonModule”。

【讨论】：