My goal is to display array data in a reactive format and iterate over a group within the array based on my data. Here is an example of how my data structure looks:
{
nombre: 'Inca Suprema'
precios: [
{
precio: 16,
variante: 'Personal'
},
{
precio: 28,
variante: 'Mediana'
},
{
precio: 38,
variante: 'Familiar'
}
]
}
I want to load the array like this:
https://i.sstatic.net/Lzs7F.png
I have attempted the following code, but it returns null. When I use this.data.item.precios, I get the precios array.
component.ts
this.formItem.addControl('precios', this.fb.array([
this.data.item.precios.forEach(element => {
this.fb.group({
variante: [element.variante],
precio: [element.precio],
});
})
]));
component.html
<div formArrayName="precios" class="col-12">
<div *ngFor="let precio of formItem.controls['precios']['controls']; let i = index;">
<div [formGroupName]="i" class="d-flex">
<div class="row gx-3">
<mat-form-field appearance="standard" class="col-6">
<mat-label>Variante</mat-label>
<input matInput type="text" formControlName="variante">
</mat-form-field>
<mat-form-field appearance="standard" class="col-6">
<mat-label>Precio</mat-label>
<span matPrefix>S/. </span>
<input matInput type="number" formControlName="precio">
</mat-form-field>
</div>
<div class="pt-1">
<button class="ms-2" matSuffix mat-icon-button (click)="eliminarPrecio(i)" [disabled]="i === 0">
<i-tabler name="trash"></i-tabler>
</button>
</div>
</div>
</div>
</div>