Angular cdk 拖放在搜索功能期间未按预期工作

Question

我已经实现了 angular 拖放搜索功能，在正常流程中，它工作正常。但是，当我搜索任何记录并尝试拖放时，记录的索引正在发生变化，而不是搜索词先前的数据，该数据存在于正在删除的数据容器中的该索引处。

 <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

将 [cdkDragData]="item" 添加到您有 cdkDrag 的 html 元素。

在 drop() 函数中，获取上一个项目索引： const previousIndex = event.previousContainer.data.findIndex(item => item === event.item.data); 所以用它代替 event.previousIndex.

Angular cdk 拖放在搜索功能期间未按预期工作

Angular cdk Drap and drop not working as expected during search functionality

drag-and-drop

twitter-bootstrap

angular

angular7