Почему я получаю сообщение об ошибке при попытке использовать TransferArrayItem для перемещения элемента массива из одного Angular cdkDropList в другой?

Question

Я чувствую, что мне не хватает чего-то простого. Я пытаюсь создать довольно простое приложение, используя DragDropModule Angular. Я просто хочу перенести элементы из одного cdkDropList в другой. Я нашел что-то в Интернете, что-то похожее и получил его в работу. Но когда я пытаюсь адаптировать свой собственный код, я получаю сообщение об ошибке, в котором говорится, что currentArray.splice не является функцией.

У меня есть код на stackblitz .

У меня есть код вверху и тестовый код, который я нашел ниже. Вы заметите, что тестовый код работает, как ожидалось, тогда как мой выдает ошибку. Единственное, что я вижу, отличается тем, что я храню строковые значения в моем массиве, а они хранят числовые значения, но я должен что-то упустить. Любой, кто может указать мне правильное направление, будет оценен. Спасибо!

Answer 1

Ошибки указаны в коде ниже:

 <div 
    id="scripture" 
    cdkDropList 
    [cdkDropListData]="words" <==== The square brackets around  [cdkDropListData] and the correct list name
    cdkDropListConnectedTo="wordbox"
    (cdkDropListDropped)="wordDrop($event)">
    <div 
      class="word-container unselect"    
      *ngFor="let wd of words">
      {{wd}}
    </div>
  </div>
  <div 
    id='wordbox' <=== the correct id is wordbox, instead of wordbank
    cdkDropList 
    [cdkDropListData]="wordbank" <==== The square brackets around  [cdkDropListData]
    cdkDropListConnectedTo="scripture"
    (cdkDropListDropped)="wordDrop($event)">
    <div 
      class="word-piece unselect"
      *ngFor="let wd of wordbank" 
      cdkDrag
      cdkDragBoundary=".drop-targets"
      [cdkDragData]="wd">
      {{wd}}</div>
  </div>