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

Question

Как сделать этот компонент блока динамическим. Что я имею в виду, каждый раз, когда я нажимаю на раскрывающийся список, нижний блок должен отображаться с учетом того, что количество блоков не должно превышать 6. В случае, если число == 6, закройте любой компонент блока, а затем вы можете нажать на выпадающий Кроме того, данные диаграммы являются динамическими и поступают с сервера после нажатия на раскрывающееся меню, и этот ответ необходимо заменить в форме диаграммы.

      <div style="margin: 10px; border: 1px solid blue; width: 30%;" #closeable1>
        <input class="rd" type="radio" checked/><small>Low</small>
        <input class="rd" type="radio"/><small>Medium</small>
        <input class="rd" type="radio"/><small>High</small>
        <input class="rd" type="radio"/><small>NA</ small>
        <button type="button" class="close" aria-label="Close" (click)="closing1(closeable1)">
            <span aria-hidden="true">x</span>
        </button>
          <hr>
        <div style="width:98%;" [chart]="stock2"></div>
      </div>

Как сделать это динамически, помня об ограничениях? Я прилагаю изображение для вашей справки. Любая помощь будет оценена.

Answer 1

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

Answer 2

Решение:

«родительский» компонент, который обрабатывает эти ограничения этот родительский компонент предоставляет метод вроде: addBlock (...), который управляет блоками

Другое решение: Служба, которая управляет списком блоков данных (и любыми ограничениями), и компонент, который подписывается на эту услугу и отображает блоки.