ngFor显示对象数据

Question

我正在尝试使用* ngFor显示所有以下actor和character对象的.name和.info元素。

我在 resultpage.component ：

中创建对象

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

这是我的html，用于浏览 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>

上述代码不会输出任何错误，但也不会输出任何信息。我相信这是由于对象上的第一个元素是 0：。但是尝试*ngFor="let item[0] of actorInfo"会导致Angular出现重大问题。

如何在对象中显示所有 name和info项？

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>