В Angular, как я могу отобразить список компонентов внутри кратных одного и того же контейнера? - PullRequest
Новая
       15

В Angular, как я могу отобразить список компонентов внутри кратных одного и того же контейнера?

0 голосов
/ 18 апреля 2019

У меня есть несколько расширяемых контейнеров, каждый из которых содержит свой компонент при раскрытии. Поскольку все эти контейнеры одинаковы, я бы хотел повторить их либо через собственный компонент, либо через цикл.

Контейнеры также должны иметь некоторый текст, прежде чем они будут расширены на основе их компонента, например:

[+] Форма собаки

[+] Форма кошки

[+] Форма птицы

Мне также нужно иметь возможность отключить некоторые контейнеры для определенных пользователей. Не могу, чтобы пользователь собаки заполнял форму кошки.

Итак, по сути, я хочу иметь: 

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