获取被删除元素的名称和ID答案

【问题标题】：Obtains the name and ID of the dropped element获取被删除元素的名称和ID
【发布时间】：2020-06-03 23:22:33
【问题描述】：

我正在使用cdk拖放库来拖放对象。

我的问题是我无法获取被拖放对象的数据（对象信息：名称和ID）。

我尝试过使用console.log (event.item.data)，但它给出了未定义的结果。

有谁知道我如何获取有关被删除元素的信息？

谢谢

.ts

 drop(event: CdkDragDrop<string[]>) {
    console.log(event.item.data)
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

html

<div class="six" style=" height: 75%;">
  <div class="card-deck cardsZone">
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;"  #activeList="cdkDropList"
      class="box-list" style="height:100%"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="A"
      [cdkDropListConnectedTo]="[inactiveList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let nw of A" cdkDrag>
        <div class="card mysmallCcards">             
          <div class="card-body">
                   <span>{{nw.name}}</span>         
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;" #inactiveList="cdkDropList"
      class="box-list" style="height:100%"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="B"
      [cdkDropListConnectedTo]="[activeList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let pr of B" cdkDrag>
        <div class="card mysmallCcards">
          <div class="card-body">
           <span>{{pr.name}}</span>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

试试这个event.container.data[event.currentIndex]['id']
所以 id 是我替换的对象，我想要我拖放的 id。感谢回复

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

【解决方案1】：

试试这个：

event.previousContainer.data[event.previousIndex]

如果你想要物品的id：

event.previousContainer.data[event.previousIndex]['id]

【讨论】：

【解决方案2】：

项目的数据只是一个输入。 documentation 是：

@Input('cdkDragData') 数据：T

要附加到此拖动实例的任意数据。

因此，要将数据添加到事件中，您必须为每个可拖动元素设置它。像这样：

<div *ngFor="let nw of A" cdkDrag [cdkDragData]="nw">

【讨论】：

感谢您的回复。在组件中，这个怎么用？
@mark event.item.data

【解决方案3】：

在容器内或跨容器拖动使用event.previousContainer.data[event.currentIndex]

要获取项目 ID，请使用 event.container.data[event.currentIndex]['id']

【讨论】：