'Event' 类型的参数不可分配给 'CdkDragMove<any>' 类型的参数

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
  }

我收到这个错误：

Argument of type 'Event' is not assignable to parameter of type 'CdkDragMove'. Type 'Event' is missing the following properties from type 'CdkDragMove': source, pointerPosition, event, distance, deltangtsc

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

Argument of type '(event: CdkDragMove) => void' is not assignable to parameter of type 'CdkDragMove'. Type '(event: CdkDragMove) => void' is missing the following properties from type 'CdkDragMove': source, pointerPosition, event, distance, delta

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

Answer 1

正如错误消息所说，您需要添加一个 Type 来告诉 cdkDragMoved 正在移动什么。就像你已经为 drop:

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

查看文档：https://material.angular.io/cdk/drag-drop/api

Answer 2

已解决

我发现 (cdkDragMoved)="dragMoved($event)" 绑定必须放置在 cdkDrag 元素，而不是 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>

'Event' 类型的参数不可分配给 'CdkDragMove<any>' 类型的参数

Argument of type 'Event' is not assignable to parameter of type 'CdkDragMove<any>'

javascript

angular-material

drag-and-drop