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!