javascript - ngFor 显示对象数据

Question

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

我在我的 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 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>