Question

我已经实现了带有搜索功能的角度拖放，在正常流程中，它工作正常。但是，当我搜索任何记录并尝试拖放时，记录的索引将发生更改，而不是搜索要删除的数据容器中该索引处存在的先前数据。

 <div class="col-lg-4 ext-form-heading ">
 <input type="text" class="form-control" [(ngModel)]="avlQueryString" id="search" placeholder="Search to type
 </div>

    <div class="mapping-container">
            <div
              cdkDropList
              #to="cdkDropList"
              [cdkDropListData]="availableRoles"
              [cdkDropListConnectedTo]="[from]"
              class="mapping-list"
              (cdkDropListDropped)="drop($event)">
              <div class="mapping-box" *ngFor="let item of availableRoles | 
           filterPipe: avlQueryString : 'roleName' : availableRoles" cdkDrag>
                <div class="mapping-inline">
                  <i  class="fa fa-angle-double-left mapping-select pull-left" (click)="addToList(item.id)" aria-hidden="true"></i>
                  {{item.roleName}}
                </div>
              </div>
            </div>
          </div>

以下是ts代码：

    drop(event: CdkDragDrop<any[]>) {
        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);
        }
      }

Answer 1

在您具有cdkDrag的html元素中添加[cdkDragData] =“ item”。

在drop（）函数中，使用以下命令获取上一个项目索引： const previousIndex = event.previousContainer.data.findIndex（item => item === event.item.data）; 因此，请使用它代替event.previousIndex。

角度cdk拖放在搜索功能期间无法正常工作

1 个答案: