angular - 如何为Angular正确设置cdk拖放？

Question

看我的步骤

1. npm install @angular/cdk

2. 在 app.module.ts -> 从 '@angular/cdk/drag-drop' 导入 { DragDropModule }；并导入：[DragDropModule]

3. 接下来我要创建拖放卡列表。我为一张卡片创建了组件，并在我想要获取 [{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 元素发出的）

Answer 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>

Answer 2

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

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

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