ngPour afficher les données d'objet

Question

J'essaie d'afficher tous les les éléments .name et .info pour les objets actor et character montrés ci-dessous, en utilisant * ngFor.

Je crée l'objet ici dans mon resultpage.component:

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

et voici mon code HTML pour courir à travers les éléments dans 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> 

Le code ci-dessus ne génère aucune erreur, mais il ne fournit aucune information. Je crois que cela est dû au premier élément sur l'objet étant 0:. Mais essayer provoque des problèmes majeurs dans Angular.

Comment puis-je afficher tous les articles name et info dans mon objet?

Answer 1

Vous devez avoir deux imbriqué 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

Essayez ceci:

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