Как вывести массив в массиве через ngFor в angular в таблицу
Не получается вывести в таблицу массив, у меня выходит что новые элементы добавляются с новой строки, а мне нужно чтобы они вывелись в одну строку, как на первом изображении, у меня получается как на втором изображении.
<h1>HttpClient</h1>
<table border="1" align="center" cellpadding="4" cellspacing="0" >
<td *ngFor="let f of flights ['head']">
<tr >
<th>{{f.name}}</th>
</tr>
<tr *ngFor="let f of flights ['head']">
<tr *ngFor="let subhead of f ['subhead']">
<th>{{subhead.name}}</th>
</tr>
</td>
</table>
json
{
"head": [
{
"name": "№",
"subhead": null
},
{
"name": "Рейсы",
"subhead": [
{ "name": "план" },
{ "name": "факт" }
]
},
{
"name": "рейсов/час",
"subhead": [
{ "name": "9:00" },
{ "name": "10:00" },
{ "name": "11:00" },
{ "name": "12:00" },
{ "name": "13:00" },
{ "name": "14:00" },
{ "name": "15:00" },
{ "name": "16:00" }
]
},
{
"name": "План на смену",
"subhead": null
}],
"data": [
{ "№": "1", "план": 10, "факт": 8, "9:00": 1, "10:00": 2, "11:00": 1, "14:00": 3, "15:00": 1, "План на смену": 1000 },
{ "№": "2", "план": 10, "факт": 6, "9:00": 1, "10:00": 1, "12:00": 2, "14:00": 1, "15:00": 1, "План на смену": 1000 },
{ "№": "3", "план": 10, "факт": 5, "9:00": 1, "12:00": 2, "14:00": 1, "15:00": 1, "План на смену": 1000 },
{ "№": "4", "план": 10, "факт": 12, "9:00": 2, "10:00": 1, "11:00": 2, "12:00": 2, "14:00": 3, "15:00": 1, "16:00": 1, "План на смену": 1000 },
{ "№": "5", "план": 10, "факт": 7, "10:00": 1, "11:00": 2, "13:00": 1, "14:00": 1, "15:00": 1, "16:00": 1, "План на смену": 1000 },
{ "№": "6", "план": 10, "факт": 8, "9:00": 3, "13:00": 2, "14:00": 1, "15:00": 1, "16:00": 1, "План на смену": 1000 }
]
}
[![введите сюда описание изображения][1]][1]
[![введите сюда описание изображения][2]][2]
[1]: https://i.stack.imgur.com/OcvLm.png
[2]: https://i.stack.imgur.com/tazrK.png