我正在尝试使用* 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 actor [0]的actorInfo”会导致Angular出现重大问题.
如何在对象中显示所有名称和信息项?
解决方法:
你需要有两个嵌套的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>