NgFor 没有显示数组 ii 给他

NgFor isn't displaying the array ii give him

提问人:Flacype 提问时间:8/16/2019 最后编辑:Flacype 更新时间:8/16/2019 访问量:62

问:

我正在为在餐馆工作的人开发一个应用程序,我有一个仪表板,我在其中向他们展示一些关于他们预订的统计数据,其中有一个部分显示了在给定时期内预订最多的 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 个客户端的列表,知道控制台 .log(this.topUsers) 返回预期的 5 个客户端。

谢谢你的帮助:')

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

HTML Angular 打字稿

评论

1赞 Emilien 8/16/2019
嘿!什么是?我认为,如果您的服务中有一种方法,那会更容易。此方法应返回 Client 类型的 Observable。然后,在你的组件中,你只需要做这样的事情:topClientgetClients()this.clients$ = this.clientService.getClients()
0赞 MoxxiManagarm 8/16/2019
您的模板中是否有 #topUsers 的元素?
0赞 Sanoj_V 8/16/2019
@Flacype for 循环中签出此示例 http-call
0赞 AT82 8/16/2019
你能给我们看一个控制台 .log ,即一个对象吗?res.body
0赞 Eliseo 8/16/2019
只是一个广告。如果你需要一个可观察对象的循环,请使用 forkJoin

答:

0赞 Tony Ngo 8/16/2019 #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.tsCommonModule

评论

0赞 Flacype 8/16/2019
那不起作用,我收到一个控制台错误,说ngFor只能绑定到数组,我的控制台.log(TopUsers)看起来像一个普通的数组((5)[{...},{...},{...},{...},{...}]),所以我想这不是因为它吗?我在另一个组件的其他地方使用了 ngFor,它工作得很好:/
0赞 Tony Ngo 8/16/2019
你能截屏一下你的问题中的更新吗?
0赞 Muhammed Albarmavi 8/16/2019
你能试试{{topUsers | json}}并与我们分享结果吗?
0赞 Flacype 8/16/2019
{{topUsers | json}} 返回每个 clientObject 的完整工作 json 以及通过 ForeignKey 与之相关的每个对象,遗憾的是,我无法将其复制粘贴到此处:/
0赞 Flacype 8/16/2019
@TonyNgo,在您的更新中,我遇到了与您的答案的第一个版本相同的错误,它无法遍历对象并且需要一个数组
0赞 akshayprasad 8/16/2019 #2

尝试将其转换为数组。

this.topUsers = [res.body]

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