为什么在尝试使用 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>

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

Why am I getting an error when trying to use transferArrayItem to move an array item from one Angular cdkDropList to another?

arrays

angular

angular-material

angular-cdk-drag-drop