![](/img/trans.png)
[英]How to display object data via ngFor loop using ngx-smart-modal angular 6?
[英]ngFor to display object data
我正在尝试使用* ngFor显示下面显示的actor
和character
对象的所有 .name和.info元素。
我在resultpage.component中创建了这个对象:
this.actorInfo = [{actor: res.actorInfo, character: this.characters}];
这是我用于运行resultpage.html中元素的html :
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<span class="character">{{item.name}}</span>
<span class="actor">{{item.info}}</span>
</div>
</div>
上面的代码不输出任何错误,但它也不输出任何信息。 我相信这是由于对象上的第一个元素为0 : . 但是尝试*ngFor="let item[0] of actorInfo"
会导致Angular出现重大问题。
如何在对象中显示所有 name
和info
项?
你需要有两个嵌套的ngFor,
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div class="member" *ngFor="let actor of item.actorInfo ">
<span class="character">{{actor.name}}</span>
</div>
<div class="member" *ngFor="let character of item.character">
<span class="actor">{{character.info}}</span>
</div>
</div>
</div>
试试这个:
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div style="width: 100%">
<div style="width: 50%; display: inline-block">
<span class="character" *ngFor="let actor of item?.actor">
{{actor.name}}
</span>
</div>
<div style="width: 50%; display: inline-block">
<span class="actor" *ngFor="let character of item?.character">
{{character.info}}
</span>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.