背景:
我有一个名为 game 的数组,它由代表游戏中每一轮的七个对象组成。在每个对象中,我都有有关该回合的详细信息,例如“roundNumber”、“title”、“players”和“winner”。 “players”属性是“player”对象的数组,其中包含该玩家在该特定回合中的得分。
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>
正如您所看到的,我已经循环遍历了顶级数组,但我不知道如何循环遍历每轮的每个玩家。任何帮助将不胜感激。它应该看起来像这样:
最佳答案
在 TR 和 td 中为每个玩家循环每轮。
<tr *ngFor="let round of game">
<td *ngFor="let player of round.players">{{ player.score }}</td>
</tr>
请注意,每个数组的回合数和玩家数据应采用相同的方式,祝你好运。
关于javascript - 如何使用 Angular 2 中的 *ngFor 迭代数组中对象内的数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42586755/