Я пытаюсь удалить элемент из моего "optionList" в "dropList", используя угловой

Question

Ниже мой HTML для компонента перетаскивания

<div class="row">
  <div id="dropAreaList "style=margin-top:5px *ngFor="let area of dropAreas"  class="col-md-3"
   cdkDropList 
    [cdkDropListConnectedTo]="['optionList']" 
    (cdkDropListDropped)="drop($event)">
    <div class="card">
      <div class="card-body drop-area">
        {{area.text}}
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div id="optionList" *ngFor="let option of dragNDropOptions.choices;let i = index" class="col-md-3" style="margin-top:5px"
    cdkDropList
    [cdkDropListData]=" dragNDropOptions.choices"
    [cdkDropListConnectedTo]="['dropAreaList']" 
    (cdkDropListDropped)="drop($event)">
    <div class="card" [class.selected]="i == selectedOptionIndex" cdkDrag>
      <div class="card-body">
        {{option.text}}
      </div>
    </div>
  </div>
</div>

это функция ondrop в моем компоненте

drop(event: CdkDragDrop<string[]>) {

if (event.previousContainer === event.container) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
  transferArrayItem(event.previousContainer.data,
                    event.container.data,
                    event.previousIndex,
                    event.currentIndex);
  }
}

event.previousContainer равно event.container хотя я пытаюсь перетащить элемент перетаскивания из контейнера 'OptionList' в контейнер 'droplist'. Может кто-нибудь указать, где я иду неправильно в реализации этого. Это мой первый раз, используя угловые / CDK / drag-drop