同一个ngFor中不同类型的组件

Question

我从API获得一个对象。它有一个包含两种类型对象的数组，我必须循环遍历该数组并根据每个索引处的对象呈现两个不同的组件。

两种元件都需要@Inputs和@Outputs才能正常工作，所以我不能像这个问题那样使用<ng-container>。

实现这样的东西的最好方法是什么?

Answer 1

如果你只有2个组件，那么你可以使用这样的东西来检查要渲染的组件类型:

<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>

如果将来组件类型的数量增加，您可能还需要查看ngSwitch。