arrays - 为什么在尝试使用 transferArrayItem 将数组项从一个 Angular cdkDropList 移动到另一个时出现错误？

Question

我觉得我必须错过一些简单的东西。我正在尝试使用 Angular 的 DragDropModule 构建一个相当简单的应用程序。我只想将项目从一个 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>