我的模板中有循环问题。我必须在一个房间的选项卡中选择一个roomRows(例如Kitchen),我有循环问题,因为我无法通过索引选择元素。这是我的模板:
<tabset #staticTabs>
<div *ngFor="let rooms of renovation">
<div *ngFor="let room of rooms.rooms;let i = index">
<tab heading="{{room.roomName}} {{i}}" [attr.data-index]="i">
<div *ngFor="let row of room.roomRows">
{{row.typeOfWorks | json}}{{i}}
</div>
</tab>
</div>
</div>
</tabset>
这是我的json文件的一部分。
'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
}
]
},
]
},
一个标签必须向一个房间显示所有roomRows信息。我尝试添加索引但我的模板行是对象的集合。有什么想法吗?
答案 0 :(得分:0)
我想它应该采用这种格式
<div *ngFor="let rooms of renovation.rooms; let i = index">
<div *ngFor="let row of rooms.roomRows; let j = index">
{{row.typeOfWorks | json}}{{i}} {{j}}
</div>
</div>