如何为 Angular 正确设置 cdk 拖放？答案

【问题标题】：How to set up correctly cdk drag-drop for Angular?如何为 Angular 正确设置 cdk 拖放？
【发布时间】：2020-12-17 07:49:16
【问题描述】：

看我的步骤

npm install @angular/cdk
在 app.module.ts -> 导入 { DragDropModule } from '@angular/cdk/drag-drop';并导入：[DragDropModule]
接下来我要创建拖放卡片列表。我为一张卡片创建了组件，并在我想要获取 [{data}]、生成卡片并为当前卡片传递当前数据时创建了父组件。

父组件TS：

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';


@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

  groups = [something data]

  constructor() { }

  ngOnInit(): void {
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.groups, event.previousIndex, event.currentIndex);
  }
}

父组件 HTML

<div cdkDropList class="groups" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let group of groups">
        <app-group cdkDrag [data]="group"></app-group>
    </div>

</div>

但是在我的卡上拖放不起作用，请帮帮我）

对于组件 HTML 中的 (cdkDropListDropped)="drop($event)，我有警告（事件 cdkdroplistdropped 不是由任何适用的指令或 div 元素发出）

【问题讨论】：

标签： angular typescript drag-and-drop angular-cdk angular-cdk-drag-drop

【解决方案1】：

我解决了这个问题。此代码有效！

<div class="groups" >
    <div cdkDropList class="groups__wrapper" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let group of groups">
            <app-group cdkDrag cdkDragHandle [data]="group"></app-group>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

请通过以下方式更改您的 ?.component.html 代码：

    <div cdkDropList class="groups" [cdkDropListData]="groups (cdkDropListDropped)="drop($event)">
        <div *ngFor="let group of groups" cdkDrag>
            {{ group }}
        </div>
    </div>

我在一个应用程序中进行了测试，它运行正常。

【讨论】：