我有疑问因为我无法解决这个问题。我尝试在我的代码中使用* ngFor。不幸的是我在嵌套的ngFor中做错了。所以我写了丑陋的代码，但它只是为了展示我需要做的事情：
<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>
那是我的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};
}
}
这一切都很好，但看起来很难看。我可以用ngFor编写代码吗？我尝试了很多次，但是我做错了什么。也许我在data.json中有错误？ 提前感谢您的帮助
答案 0 :(得分：0)
您可以使用以下代码：
<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>
代码解释：所以第一次 ngFor 迭代第一次翻新的房间，之后我们有一个房间包含 romRow 所以第二个 ngFor 迭代一个房间的 romRows 。