Ng To display object data

Question

I am trying to display all .name and .info elements for objects actorand charactershown below using * ngFor.

I create an object here in my resultpage.component :

this.actorInfo = [{actor: res.actorInfo, character: this.characters}];

and here is my html for launching 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 code above does not display any errors, but also does not display any information. I believe this is due to the fact that the first element on the object is 0 :. But the attempt *ngFor="let item[0] of actorInfo"causes serious problems in Angular.

How can I display all the elements nameand infoin my facility?

Answer 1

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>

Answer 2

:

<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>