我有一个嵌套的对象JSON文件，看起来像这样：
"8": {
"age": "Grand Masters",
"gender": "Women",
"division": "Club",
"year_placements": {
"2017": {
"year": 2017,
"event_id": "53522846-5039-11eb-8917-080027315160",
"event_season_id": "d62f237c-5040-11eb-8917-080027315160",
"event_name": "USA Ultimate Masters Championships",
"event_location": "Aurora, Colorado",
"placements": {
"1": {
"d62c24e9-5040-11eb-8917-080027315160": {
"team": "Boston",
"team_location": "Boston, Massachusetts",
"team_season_id": "d62c24e9-5040-11eb-8917-080027315160",
"event_team_placement_id": 5411
}
},
"2": {
"d6333181-5040-11eb-8917-080027315160": {
"team": "J2",
"team_location": "Seattle, Washington",
"team_season_id": "d6333181-5040-11eb-8917-080027315160",
"event_team_placement_id": 5412
}
}
}
},
"2018": {
"year": 2018,
"event_id": "537edbe9-5039-11eb-8917-080027315160",
"event_season_id": "e02569e6-5040-11eb-8917-080027315160",
"event_name": "USA Ultimate Masters Championships",
"event_location": "Aurora, Illinois",
"placements": {
"1": {
"e0227383-5040-11eb-8917-080027315160": {
"team": "Furari",
"team_location": "San Diego, California",
"team_season_id": "e0227383-5040-11eb-8917-080027315160",
"event_team_placement_id": 5852
}
},
"2": {
"e029d38a-5040-11eb-8917-080027315160": {
"team": "Boston",
"team_location": "Boston, Massachusetts",
"team_season_id": "e029d38a-5040-11eb-8917-080027315160",
"event_team_placement_id": 5853
}
}
}
}
}我有一个名为的对象的实例this.tournament。我试图通过每年迭代和显示year，以及在每个team中placements嵌套的对象，都在一个表中的一行。现在我的html看起来像：
<table>
<thead>
<tr>
<th>Year</th>
<th>Champion</th>
<th>2nd Place</th>
<th>Semi-Finalist</th>
<th>Semi-Finalist</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let year_placement of tournament.year_placements | keyvalue'>
<td>{{year_placement.key}}</td>
<td *ngFor='let team_placement of year_placement.value.placements | keyvalue'>
{{team_placement.key}}
</td>
</tr>
</tbody>
</table>我有两个可以看到的问题。最重要的year是，可以正确打印出来，但是我不知道如何打印"team"字段。team_placement.key打印出类似1, 2, 3...的位置，而team_placement.value只是说[Object，object]。我需要team_placement.value.team，但这给了我一个未定义的问题。
我要解决的第二个问题<td>是，即使必须为空，我也总是为每行生成5个总计s。现在，如果“展示位置”对象中的团队少于4个，它将在最后几列中遗漏表格。如何确定我总是产生5个？
您可以像下面这样迭代：
<table style="border: solid 1px">
<tr *ngFor='let year of tournament?.year_placements | keyvalue' style="border: solid 1px">
<td style="border: solid 1px">{{year.key}}</td>
<ng-container *ngFor='let teams of year.value.placements | keyvalue'>
<td *ngFor="let team of teams.value | keyvalue" style="border: solid 1px">
<ng-container *ngFor="let teamDesc of team.value | keyvalue">
<div *ngIf="teamDesc.key !== 'team_season_id'">
{{teamDesc.value}}</div>
</ng-container>
</td>
</ng-container>
</tr>
</table>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句