Tengo un producto que tiene adicionales los cuales dentro poseen opciones y estos ultimos son los que quiero recorrer.
Este es el JSON que recibo de la peticion
{
"06aa27a0-cc4f-11ec-b942-5fe5314f4dab": {
"Descripcion": "Selecciona la salsa que mas te guste",
"Maximo": 2,
"Minimo": 0,
"Nombre": "Salsas",
"Opciones": {
"046ae380-369e-11ed-ac1b-61f04f5d7304": {
"Nombre": "Salsa blanca",
"Precio": 200
},
"126ae380-369e-11ed-ac1b-61f04f5d7304": {
"Nombre": "Salsa Roja",
"Precio": 200
}
}
},
"e1c8c4f0-369d-11ed-ac1b-61f04f5d7304": {
"Descripcion": "Elige el tamaño de tu papas fritas",
"Maximo": 5,
"Minimo": 0,
"Nombre": "Papas fritas",
"Opciones": {
"046ae380-369e-11ed-ac1b-61f04f5d7304": {
"Nombre": "Pequeño",
"Precio": 400
},
"546ae380-369e-11ed-ac1b-61f04f5d7304": {
"Nombre": "Grande",
"Precio": 1400
}
}
}
}
Almaceno la peticion a una variable llamada aditionals de la siguiente forma
public aditionals: any;
async getAditionals(){
(await this.productsService.getAditionals('046ae380-369e-11ed-ac1b-61f04f5d7304'))
.subscribe(
(response) => {
this.aditionals = Object.values(response);
},
(error) => {
console.log(error);
}
);
}
Asi es como estoy intentando recorrer la lista en el HTML
<mat-expansion-panel *ngFor="let element of aditionals; let j = index" [attr.data-index]="j">
<mat-expansion-panel-header>
<mat-panel-title>
<h6>{{ element.Nombre }}</h6>
</mat-panel-title>
<mat-panel-description>
<h6>{{ element.Description }}</h6>
<h6>{{ element.Minimo }}</h6>
<h6>{{ element.Maximo }}</h6>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="row">// Aqui es el problema
<div class="col-12" *ngFor="let key of element.Opciones">
<div class="row">
<div class="col-6">
<mat-form-field>
<mat-label>Nombre</mat-label>
<input matInput value="{{key.Nombre}}">
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field>
<mat-label>Precio</mat-label>
<input matInput value="{{key.Precio}}">
</mat-form-field>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
Que estoy haciendo mal? Estoy intentando recorrer el Opciones del Adicional, pero obtengo el siguiente error
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.