有角度的动态元素问题

Question

我正在根据服务器的响应创建动态表单。我成功创建了动态表单元素，但是当出现多个相似类型的元素时无法处理它们。

我已经使用文本框和div创建了自动填充功能，并从自动填充功能中选择了一项，然后将它们添加到药丸中。但是，当元素多于1个时，列表值也会重复。

我知道它是因为我使用的是同一数组，但是如何在运行时生成数组并将它们与元素关联是运行时。 请帮我解决这个问题。

我尝试使用反应形式而不是ngModel进行自动完成，并使用文本附加ID作为数组名称，但这对我不起作用。

<div *ngIf="subquestion.input_type=='Select'" class="justify-content-end">
  <div class="pills-list pb-3">
    <span class="badge badge-pill mx-1" style="border: 1px solid #ced4da" *ngFor="let option of optionSelected">{{option}}
      <i class="fas fa-times pl-2" (click)="onRemoveSelected(option)"></i>
    </span>
  </div>
  <input [(ngModel)]="searchText" type="text" placeholder="Input Text" class="form-control border-bottom position-relative" style="border:0;bottom:0;" (keyup)="addSelection(subquestion.question_id,$event)">
  <ul id="{{subquestion.question_id}}" class="dropdown-option shadow rounded px-3 mx-3" [className]="" role="menu">
    <li *ngFor="let option of optionList | searchfilter : searchText" (click)="onListSelection(subquestion.question_id,option)">{{option}}</li>
  </ul>
  <hr>
</div>

addSelection(id,event:any){
  if(event.target.value) {
    console.log(event.target);
    document.getElementById(`${id}`).classList.add('d-block');
  }
  else{
    document.getElementById(`${id}`).classList.remove('d-block');
  }
}

onListSelection(id,selection:string){
  if(this.optionSelected.indexOf(selection) == -1)
    this.optionSelected.push(selection);
    document.getElementById(`${id}`).classList.remove('d-block');
  }

我希望2种差异输入类型的药丸列表有所不同

我的动态表单：