I'm trying to display all the .name and .info elements for actor
and character
objects shown below, using *ngFor.
I create the object here in my resultpage.component :
this.actorInfo = [{actor: res.actorInfo, character: this.characters}];
and here is my html for running through the elements in resultpage.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>
The above code does not output any errors, but it also does not output any information. I believe this is due to the first element on the object being 0: . But trying *ngFor="let item[0] of actorInfo"
causes major problems in Angular.
How can I display all the name
and info
items in my object?
You need to have two nested 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>
Try this:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.