[英]How do I convert an array into an object within array - Angular and Javascript
[英]How do I iterate over an array within an object within an array using *ngFor in angular 2?
背景:
我有一个称为游戏的数组,它由代表游戏中每一轮的七个对象组成。 在每个对象中,我都有关于该回合的详细信息,例如“ 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>
循环遍历每个玩家的TR和td。
<tr *ngFor="let round of game">
<td *ngFor="let player of round.players">{{ player.score }}</td>
</tr>
您可以在此处使用* 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.