在Angular中，如何显示同一容器的多个元素内的组件列表？

Question

我有多个可扩展容器，每个容器在扩展时都包含一个不同的组件。由于这些容器都是相同的，因此我想通过它们自己的组件或循环来重复它们。

在根据容器的组件进行扩展之前，容器还需要带有一些文本，例如：

[+]狗形

[+]猫形

[+]鸟形

我还需要能够为某些用户禁用某些容器。不能让狗狗用户填写猫的表格。

所以本质上，我想拥有：

|Container
|
|<component1></component1>


<div *ngIf="data">
|Container
|
|<component2></compoennt2>
</div>


|Container
|
|<component3></compoennt3>

我尝试使用组件工厂，但是从我发现的结果来看，它只能显示一个容器内的组件。

这是我正在使用的容器

<form #expandable-container="ngForm" class="form-horizontal">
  <div class="col-xs-12 margins-0 padding-0">
    <div class="row margins-0 padding-0">
      <div class="form-group  title-spacing">
        <span class="col-xs-1 vcenter-right button-padding">
           <input type="image" class="expandButton" alt="Expand Icon" src="/images/expand-button.png" width="24" height="24 (click)="toggleDetails()" *ngIf="!showDetails">
           <input type="image" class="expandButton" alt="Collapse Icon" src="/images/collapse-button.png" width="24" height="24 (click)="toggleDetails()" *ngIf="showDetails">
        </span>
        <label class="col-xs-2 control-label margins-0 vcenter-right label-padding">Form's Title Goes Here</label>
      </div>
    </div>
  </div>
  <div *ngIf="isExpanded">

    <components></components>

  </div>
</form>