0

Buen día amigos tengo el siguiente array de objetos:

public data:any = [
{
  'format': 'format1',
  'subFormats': [
  {'name': 'subform1'},
  {'name': 'subform2'},
  {'name': 'subform3'},

  ]
},
{
  'format': 'format2',
  'subFormats': [
  {'name': 'subform2.1'},
  {'name': 'subform2.2'},
  {'name': 'subform2.3'},

  ]
},
{'format': 'format3',
  'subFormats': [
  {'name': 'subform3.1'},
  {'name': 'subform3.2'},
  {'name': 'subform3.3'},

  ]}

];

La idea es poder mostrar los valores de "format" y en cada una de ellos mostrar también los subformats; lo que he intentado es hacer dos ngFor anidados, uno para mostrar los "format" y el otro para mas mostrar sus "subformats" repectivos, pero no me funciona.

Esta es mi vista:

<li *ngFor="let hero of data">
  {{ hero.format }}
  <p *ngFor="let subform of data">
      {{subform.subFormats.name}}
  </p>
</li>

Aquí está el ejemplo completo: https://stackblitz.com/edit/angular-7yasq7?embed=1&file=src/app/app.component.ts

¿Alguién tiene idea de cómo se hace? De antemano muchas gracias!

1 respuesta 1

2

Tu html debería quedar así:

<hello name="{{ name }}"></hello>
<li *ngFor="let hero of data">
      {{ hero.format }}
      <p *ngFor="let subform of hero.subFormats">
          {{subform.name}}
      </p>
    </li>

Donde "data" es el arreglo de objetos.
"hero" es un objeto dentro del arreglo de objetos "data".
Luego en el segundo for, se recorre el atributo "subFormats" del objeto "hero".
Finalmente se escribe el nombre del objeto "subform" dentro del arreglo "subFormats".

1
  • Muchas gracias!, era justo lo que necesitaba Commented el 10 mar. 2019 a las 15:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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