1

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.

2 respuestas 2

1

Como creo puede ser de utilidad dejo como resolvi este inconveniente.

Primero cree una interface llamada AditionalsOptions

export interface AditionalsOptions {
    Nombre: string;
    Precio: number;
}

Posteriormente cree un pipe para filtrar el objeto en el html llamado valueOptions

import { Pipe, PipeTransform } from '@angular/core';
import { AditionalsOptions } from '../interfaces/product/aditionals-options';

@Pipe({
  name: 'valueOptions',
  pure: false
})
export class ValueOptionsPipe implements PipeTransform {
  // El parametro object representa, los valores de las propiedades o indice
  transform = (objects: AditionalsOptions[] = []) => {
    return Object.values(objects);
  }
}

Y para finalizar recorri el html llamando al pipe creado anteriormente

<div class="col-sm-12" *ngFor="let key of element.Opciones | valueOptions">
    <div class="row">
        <div class="col-sm-6">
            <mat-form-field>
                <mat-label>Nombre</mat-label>
                <input matInput value="{{( key.Nombre )}}">
            </mat-form-field>
        </div>
        <div class="col-sm-6">
            <mat-form-field>
                <mat-label>Precio</mat-label>
                <input matInput value="{{ key.Precio }}">
            </mat-form-field>
            </div>
        </div>
    </div>
</div>
1
  • Tambien es posible utilizar el pipe keyvalue
    – Legna
    el 4 oct. 2022 a las 3:27
1

Tambien es posible hacerlo con el pipe keyvalue:

<span>
  <p>Object</p>
  <ng-container *ngFor="let item of object | keyvalue">
  {{item.key}}:
  <br/> 
  <br/> 
      <span *ngFor="let item2 of item.value | keyvalue">
         
          {{item2.key}}:{{item2.value}}
        <br/> 
      </span>
<br/>
</ng-container>

</span>

Acerca del pipe keyvalue

The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types.


La salida del array será ordenada por las llaves. Por defecto el comparador deberá ser de tipo unicode. Opcionalmente puedes pasarle una funcion compareFn si tus llaves son tipos complejos.

Te dejo un ejemplo funcional aquí.

1
  • Muy buena respuesta, bien completa, pero mi intencion era recorrer el sub objeto Opciones para obtener estas variantes. Es por ello que cree la interfaz y mi propio pipe para obtener esos valores. el 4 oct. 2022 a las 10:22

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.