Dealing with Angular 6 tables and encountering a challenge with an item in the *ngFor loop.
Here is my HTML view:
<table class="table table-bordered text-center">
<tr>
<th class="text-center">Cuenta</th>
<th class="text-center">ENE 2018</th>
<th class="text-center">Proy. Lineal</th>
<th class="text-center">Proy. Sugerida</th>
<th class="text-center">Proy. Comercial</th>
<th class="text-center">Presupuesto a convenir</th>
</tr>
<tr *ngFor="let data of centroData; let id = index">
<td>
<span>{{data.id}}</span>
</td>
<td>
<span>{{data.ENE2018}}</span>
</td>
<td>
<span>{{data.ProyLinealCalculado}}</span>
</td>
<td>
<span>{{data.ProySugeridaCalculado}}</span>
</td>
<td>
<span>{{data.ProyComercialCalculado}}</span>
</td>
<td>
<span>{{data.Presupuesto}}</span>
</td>
</tr>
</table>
This represents my array in component.ts:
centroData: Array<any> = [
{
id: 123333123,
ENE2018: 1340300,
ProyLinealCalculado: 1393939,
ProySugeridaCalculado: 1239393,
ProyComercialCalculado: 3039430,
Presupuesto: null,
subcuentas: [
{
id: 1,
folio: "123333123-01",
ENE2018: 39394,
ProyLinealCalculado: 1393939,
ProySugeridaCalculado: 1239393,
ProyComercialCalculado: 3039430,
Presupuesto: null
},
{
id: 2,
folio: "123333123-02",
ENE2018: 39394,
ProyLinealCalculado: 1393939,
ProySugeridaCalculado: 1239393,
ProyComercialCalculado: 3039430,
Presupuesto: null
}
]
}
];`
In essence, I aim to include a new <tr> for 'subcuentas'. When there are multiple elements in the array, how can this be accomplished?
The solution on my mind
I understand that nesting another *ngFor inside the initial *ngFor will break the row structure of the table. How should I tackle this challenge?