提问人:Flacype 提问时间:8/16/2019 最后编辑:Flacype 更新时间:8/16/2019 访问量:62
NgFor 没有显示数组 ii 给他
NgFor isn't displaying the array ii give him
问:
我正在为在餐馆工作的人开发一个应用程序,我有一个仪表板,我在其中向他们展示一些关于他们预订的统计数据,其中有一个部分显示了在给定时期内预订最多的 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
答:
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”。
评论
topClient
getClients()
this.clients$ = this.clientService.getClients()
res.body