Question

背景

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

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>

正如你所看到的，我已经通过顶级阵列循环，但我不知道如何在每一轮中循环每个玩家。任何帮助将不胜感激。它应该看起来像这样：

Answer 1

循环播放每个玩家的TR和td中的每轮。

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

请注意，你的回合和玩家数据应该以相同的方式为每个阵列带来好运。

Answer 2

您可以使用* ngFor here的扩展语法：

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

如何在角度2中使用* ngFor迭代数组内对象内的数组？

2 个答案:

请注意，你的回合和玩家数据应该以相同的方式为每个阵列带来好运。