类型的参数不能分配给类型的参数＆＃x27; cdkdragmove＆lt; any gt;＆＃x27;

Question

我试图获取可拖动元素移动时的位置，但找不到任何与 CdkDragMove 配合使用的属性。

HTML 模板

<div
  cdkDropList
  [cdkDropListData]="day.lunch"
  [cdkDropListConnectedTo]="dropTargetIds"
  class="example-list"
  (cdkDropListDropped)="drop($event)"
  (cdkDragMoved)="dragMoved($event)" // <--- Error (see below)
  >
    //Actual content
  </div>

TypeScript

dragMoved(event:CdkDragMove<any>){
    // get PosX & PosY
  }
  drop(event: CdkDragDrop<Recipe[]>) {
    // other stuff
  }

我收到此错误：

“Event”类型的参数不可分配给类型的参数 'CdkDragMove'。类型“事件”缺少以下属性 来自类型“CdkDragMove”：源、pointerPosition、事件、 距离，三角洲

我也尝试过使用 DragMoved 而不是 $event 但后来我得到了这个

类型参数'(event: CdkDragMove) => void' 不可赋值 到“CdkDragMove”类型的参数。输入 '(事件： CdkDragMove) => void' 缺少以下属性 输入“CdkDragMove”：源、指针位置、事件、距离、 德尔塔

我无法理解这个问题，因为该事件正在处理 drop 函数。 有什么想法吗？

Answer 1

当我无法将 DragDropModule 导入到我的模块中时，出现此错误。

import { DragDropModule } from '@angular/cdk/drag-drop';

Answer 2

解决

我发现（cdkdragmoved）=“ dragmaved（$ event）”必须放置在cdkdrag element上，而不是在CDKDROPLIST元素上。

<div
            cdkDropList
            [cdkDropListData]="day.lunch"
            [cdkDropListConnectedTo]="dropTargetIds"
            class="example-list"
            (cdkDropListDropped)="drop($event)"
            // It was here
          >
            <mat-chip-list class="mat-chip-list-stacked" >
              <mat-chip cdkDrag (cdkDragMoved)="dragMoved($event)"> //<--- Must be Here
                // content
              </mat-chip>
            </mat-chip-list>
          </div>

Answer 3

正如错误消息所示，您需要添加一个类型来告诉 cdkDragMoved 正在移动什么。就像您已经对 drop 所做的那样：

dragMoved(event:CdkDragMove<Recipe[]>){
   // get PosX & PosY
}

请参阅文档： https://material.angular.io /cdk/drag-drop/api