Получает имя и идентификатор отброшенного элемента - PullRequest
Новая
       10

Получает имя и идентификатор отброшенного элемента

2 голосов
/ 19 февраля 2020

Я использую библиотеку cdk drag and drop для перетаскивания объектов.

Моя проблема в том, что я не могу получить данные (информация об объекте: имя и идентификатор) удаленного объекта.

Я пытался использовать console.log (event.item.data), но это дает неопределенное значение.

Кто-нибудь знает, как я могу получить информацию о отброшенном элементе?

Спасибо

Stackblitz - Демо

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

Ответы [ 2 ]

1 голос
/ 19 февраля 2020

Попробуйте с этим:

event.previousContainer.data[event.previousIndex]

Если вы хотите идентификатор элемента:

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

0 голосов
/ 19 февраля 2020

Данные элемента являются только входом. Документация для него:

@ Входные данные ('cdkDragData'): T

Произвольные данные для присоединения к этому экземпляру перетаскивания.

Итак, чтобы добавить данные в событие, вы должны установить их для каждого перетаскиваемого элемента. Как это:

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

...