Obtengo un objeto de una API. Tiene una matriz que contiene 2 tipos de objetos, tengo que recorrer esta matriz y representar dos componentes diferentes según el objeto en cada índice.
Ambos tipos de componentes necesitan @Input s y @Output s para funcionar correctamente, por lo que no puedo usar <ng-container> como se muestra en esta pregunta .
¿Cuál es la mejor manera de implementar algo como esto?
Si solo tiene 2 componentes, podría usar algo como esto para verificar qué tipo de componente representar:
<ng-container *ngFor="let item of items"> <ng-container *ngTemplateOutlet="<type check condition here> ? type1 : type2; context: { $implicit: item }"> </ng-container> </ng-container> <!-- in each one of these templates you can access the item in the array via "item" --> <ng-template #type1 let-item> <!-- render component for type 1 here --> </ng-template> <ng-template #type2 let-item> <!-- render component for type 2 here --> </ng-template> Es posible que también desee analizar ngSwitch si la cantidad de tipos de componentes aumenta en el futuro.