如何在 Angular 2 中使用 *ngFor 遍历数组中的对象内的数组？答案

【问题标题】：How do I iterate over an array within an object within an array using *ngFor in angular 2?如何在 Angular 2 中使用 *ngFor 遍历数组中的对象内的数组？
【发布时间】：2017-07-24 00:40:58
【问题描述】：

背景：

我有一个名为 game 的数组，它由代表游戏中每一轮的七个对象组成。在每个对象中，我都有关于该回合的详细信息，例如“roundNumber”、“title”、“players”和“winner”。 “玩家”属性是一个“玩家”对象数组，其中包含该玩家在该特定回合中的得分。

game = [

    {
      roundNumber: 1,
      title: "2 Books",
      players: [
        {
          pk: 1,
          username: "James",
          score: 5,
        },
        {
          pk: 2,
          username: "Jim",
          score: 54,
        },
        {
          pk: 3,
          username: "Bob",
          score: 22,
        },
      ],
      winner: undefined,

    },

    {
      roundNumber: 2,
      title: "1 Book 1 Run",
      players: [
        {
          pk: 1,
          username: "James",
          score: 54,
        },
        {
          pk: 2,
          username: "Jim",
          score: 32,
        },
        {
          pk: 3,
          username: "Bob",
          score: 76,
        },
      ],
      winner: undefined,
    },

    //etc
    //etc
    //etc

];

我想要发生的事情：

我希望能够遍历所有这些数据并使用 *ngFor 将其放在我模板上的表格中。

<table id="data-table" class="table table-striped">
    <thead>
      <tr>
        <th *ngFor="let round of game">{{ round.title }}</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let player of round of game"> //HOW DO I STRUCTURE MY LOOP HERE?
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
      </tr>
    </tbody>
  </table>

如您所见，我已经遍历了顶层数组，但我不知道如何在每一轮中遍历每个玩家。任何帮助将不胜感激。它应该看起来像这样：

【问题讨论】：

应该对玩家列表进行去重，还是应该包含重复？
@Adam 检查我添加的图片。
表格元素强制你的外循环覆盖行（tr），内循环覆盖列（td），所以你必须为指令构建不同的数据，或者选择一列代替布局。
您的数据未正确分组以创建您期望的输出。
@Claies 是的，这就是我很快得出的结论。

标签： javascript angular typescript

【解决方案1】：

在 TR 和 td 中为每位玩家循环。

 <tr *ngFor="let round of game">
   <td *ngFor="let player of round.players">{{ player.score }}</td>
 </tr>

请注意，您的回合数和玩家数据应该以相同的方式显示每个数组，祝您好运。

【讨论】：

round.players
谢谢@Omri 被错误地错过了:)

【解决方案2】：

你可以在这里使用 *ngFor 的扩展语法：

<table id="data-table" class="table table-striped">
  <ng-template ngFor let-round [ngForOf]="game">
    <thead>
      <tr>
        <th>{{ round.title }}</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let player of round.players">
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
      </tr>
    </tbody>
  </ng-template>
</table>

【讨论】：