Angular 2中的嵌套ngFor
[英]Nested ngFor in Angular 2
问题描述
I have question because I can't resolve this problem. 
我有问题，因为我无法解决此问题。 I try use *ngFor in my code. 我尝试在代码中使用* ngFor。 Unfortunately I doing something wrong in nested ngFor. 不幸的是，我在嵌套ngFor中做错了什么。 So I write ugly code but it's only for show what I need to do: 所以我写了丑陋的代码，但这只是为了显示我需要做的事情：
<tabset #staticTabs>
<tab heading="{{renovation[0].rooms[0].roomName }} {{i}}" >
<table class="table">
<thead>
<!-- SORTOWANIE -->
<tr>
<th>Lp</th>
<th>Rodzaj robót</th>
<th>Koszt materiałów</th>
<th>Koszt robocizny</th>
<th>Akceptacja</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{renovation[0].rooms[0].roomRows[0].id}}</td>
<td>{{renovation[0].rooms[0].roomRows[0].typeOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[0].costOfMaterials}}</td>
<td>{{renovation[0].rooms[0].roomRows[0].costOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[0].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[0].roomRows[1].id}}</td>
<td>{{renovation[0].rooms[0].roomRows[1].typeOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[1].costOfMaterials}}</td>
<td>{{renovation[0].rooms[0].roomRows[1].costOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[1].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[0].roomRows[2].id}}</td>
<td>{{renovation[0].rooms[0].roomRows[2].typeOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[2].costOfMaterials}}</td>
<td>{{renovation[0].rooms[0].roomRows[2].costOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[2].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[0].roomRows[3].id}}</td>
<td>{{renovation[0].rooms[0].roomRows[3].typeOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[3].costOfMaterials}}</td>
<td>{{renovation[0].rooms[0].roomRows[3].costOfWorks}}</td>
<td>{{renovation[0].rooms[0].roomRows[3].accept}}</td>
</tr>
</tbody>
</table>
</tab>
<tab heading="{{renovation[0].rooms[1].roomName }}" >
<table class="table">
<thead>
<tr>
<th>Lp</th>
<th>Rodzaj robót</th>
<th>Koszt materiałów</th>
<th>Koszt robocizny</th>
<th>Akceptacja</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{renovation[0].rooms[1].roomRows[0].id}}</td>
<td>{{renovation[0].rooms[1].roomRows[0].typeOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[0].costOfMaterials}}</td>
<td>{{renovation[0].rooms[1].roomRows[0].costOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[0].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[1].roomRows[1].id}}</td>
<td>{{renovation[0].rooms[1].roomRows[1].typeOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[1].costOfMaterials}}</td>
<td>{{renovation[0].rooms[1].roomRows[1].costOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[1].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[1].roomRows[2].id}}</td>
<td>{{renovation[0].rooms[1].roomRows[2].typeOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[2].costOfMaterials}}</td>
<td>{{renovation[0].rooms[1].roomRows[2].costOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[2].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[1].roomRows[3].id}}</td>
<td>{{renovation[0].rooms[1].roomRows[3].typeOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[3].costOfMaterials}}</td>
<td>{{renovation[0].rooms[1].roomRows[3].costOfWorks}}</td>
<td>{{renovation[0].rooms[1].roomRows[3].accept}}</td>
</tr>
</tbody>
</table>
</tab>
<tab heading="{{renovation[0].rooms[2].roomName }}" >
<table class="table">
<thead>
<tr>
<th>Lp</th>
<th>Rodzaj robót</th>
<th>Koszt materiałów</th>
<th>Koszt robocizny</th>
<th>Akceptacja</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{renovation[0].rooms[2].roomRows[0].id}}</td>
<td>{{renovation[0].rooms[2].roomRows[0].typeOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[0].costOfMaterials}}</td>
<td>{{renovation[0].rooms[2].roomRows[0].costOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[0].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[2].roomRows[1].id}}</td>
<td>{{renovation[0].rooms[2].roomRows[1].typeOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[1].costOfMaterials}}</td>
<td>{{renovation[0].rooms[2].roomRows[1].costOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[1].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[2].roomRows[2].id}}</td>
<td>{{renovation[0].rooms[2].roomRows[2].typeOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[2].costOfMaterials}}</td>
<td>{{renovation[0].rooms[2].roomRows[2].costOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[2].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[2].roomRows[3].id}}</td>
<td>{{renovation[0].rooms[2].roomRows[3].typeOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[3].costOfMaterials}}</td>
<td>{{renovation[0].rooms[2].roomRows[3].costOfWorks}}</td>
<td>{{renovation[0].rooms[2].roomRows[3].accept}}</td>
</tr>
</tbody>
</table>
</tab>
<tab heading="{{renovation[0].rooms[3].roomName }}" >
<table class="table">
<thead>
<tr>
<th>Lp</th>
<th>Rodzaj robót</th>
<th>Koszt materiałów</th>
<th>Koszt robocizny</th>
<th>Akceptacja</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{renovation[0].rooms[3].roomRows[0].id}}</td>
<td>{{renovation[0].rooms[3].roomRows[0].typeOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[0].costOfMaterials}}</td>
<td>{{renovation[0].rooms[3].roomRows[0].costOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[0].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[3].roomRows[1].id}}</td>
<td>{{renovation[0].rooms[3].roomRows[1].typeOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[1].costOfMaterials}}</td>
<td>{{renovation[0].rooms[3].roomRows[1].costOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[1].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[3].roomRows[2].id}}</td>
<td>{{renovation[0].rooms[3].roomRows[2].typeOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[2].costOfMaterials}}</td>
<td>{{renovation[0].rooms[3].roomRows[2].costOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[2].accept}}</td>
</tr>
<tr>
<td>{{renovation[0].rooms[3].roomRows[3].id}}</td>
<td>{{renovation[0].rooms[3].roomRows[3].typeOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[3].costOfMaterials}}</td>
<td>{{renovation[0].rooms[3].roomRows[3].costOfWorks}}</td>
<td>{{renovation[0].rooms[3].roomRows[3].accept}}</td>
</tr>
</tbody>
</table>
</tab>
</tabset>
That is my data.json: 那就是我的data.json：
import { InMemoryDbService, InMemoryBackendConfig } from 'angular-in-memory-web-api';
import {IRenovationList} from './renovation-list/renovation-list';
export class RenovationData implements InMemoryDbService, InMemoryBackendConfig {
createDb() {
let renovations: IRenovationList[] = [
{
'id': 1,
'name': 'remont',
'zipCode': 500,
'rooms': [
{
"roomId": 1,
"roomName": "Kitchen",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 2,
"roomName": "Toilet",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1524500,
"costOfWorks": 30,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 5650,
"costOfWorks": 14550,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 3,
"roomName": "Corridor",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 4,
"roomName": "Bathroom",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
]
},
{
'id': 2,
'name': 'remont testowy',
'zipCode': 500555,
'rooms': [
{
"roomId": 1,
"roomName": "Kuchnia",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 3850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 2,
"roomName": "Salon",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 2500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 3,
"roomName": "Pokój",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 2650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "test Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
{
"roomId": 4,
"roomName": "Balkon",
"roomRows": [
{
"id": 1,
"typeOfWorks": "Malowanie ścian",
"costOfMaterials": 1500,
"costOfWorks": 2100,
"accept": false
},
{
"id": 2,
"typeOfWorks": "Podłogi",
"costOfMaterials": 35555650,
"costOfWorks": 1800,
"accept": true
},
{
"id": 3,
"typeOfWorks": "Okna",
"costOfMaterials": 1200,
"costOfWorks": 450,
"accept": true
},
{
"id": 4,
"typeOfWorks": "Drzwi",
"costOfMaterials": 850,
"costOfWorks": 250,
"accept": true
}
]
},
]
},
];
return {renovations};
}
}
That's all works fine but look ugly. 一切正常，但看起来很丑。 Can I write that code with ngFor? 我可以用ngFor编写该代码吗？ I try many times but I do something wrong. 我尝试了很多次，但是做错了。 Maybe I have error in data.json? 也许我在data.json中有错误？ thank you in advance for your help 预先感谢您的帮助
1 个解决方案
解决方案1
0 2017-11-22 17:52:06
you can use the following code : 您可以使用以下代码：
<ng-container *ngFor="let room of renovations[0].rooms "> <h3>{{room.roomName }} hhhh {{room.roomId }}</h3> <table class="table" border="1"> <thead> <!-- SORTOWANIE --> <tr> <th>Lp</th> <th>Rodzaj robót</th> <th>Koszt materialów</th> <th>Koszt robocizny</th> <th>Akceptacja</th> </tr> </thead> <tbody> <tr *ngFor="let roomRow of room.roomRows"> <td>{{roomRow.id}}</td> <td>{{roomRow.typeOfWorks}}</td> <td>{{roomRow.costOfMaterials}}</td> <td>{{roomRow.costOfWorks}}</td> <td>{{roomRow.accept}}</td> </tr> </tbody> </table> </ng-container>
explanation of code: so the first ngFor iterate the rooms of the first renovation, after this we have a room contain a list of romRow so the second ngFor iterate the romRows of one room . 代码说明：因此，第一个ngFor迭代一次装修的房间 ，此后我们有一个包含romRow列表的房间，因此第二个ngFor迭代一个房间的romRows 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Angular - *ngFor 在嵌套的 JSON - Angular - *ngFor on nested JSON
如何在 angular 中实现嵌套 *ngFor - How to implement nested *ngFor in angular
Angular 2：嵌套* ng用于JSON数据 - Angular 2: Nested *ngFor JSON data
角度5/4中* ngFor的嵌套JSON数据循环 - Nested JSON data loop for *ngFor in angular 5/4
ngFor 用于 Angular 中复杂的嵌套 JSON 数据 - ngFor for complex nested JSON data in Angular
Angular html，如何为嵌套的 object 进行 ngfor 循环？ - Angular html, how to ngfor loop for nested object?
嵌套 JSON 上的 Angular 6 ngFor 选择对象 - Angular 6 ngFor select object on a nested JSON
如何使用ngFor在Angular中循环未知数量的嵌套json object？ - How to loop through unknow number of nested json object in Angular with ngFor?
*ngFor 嵌套 JSON 调用 HTML 页面 Angular 离子 - *ngFor Nested JSON call In HTML page Angular Ionic
如何使用angular2 ngFor深度嵌套的json值 - how to ngFor deeply nested json value with angular2
相关标签