获取被放置元素的名称和ID

Question

我正在使用 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>

Answer 1

试试这个：

event.previousContainer.data[event.previousIndex]

如果你想要物品的id:

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

Answer 2

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

@Input('cdkDragData') data: T

Arbitrary data to attach to this drag instance.

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

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

Answer 3

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

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

获取被放置元素的名称和ID

Obtains the name and ID of the dropped element

drag-and-drop

typescript

angular-material

angular

angular-cdk