在搜索功能期间，Angular cdk 拖放无法按预期工作答案

【问题标题】：Angular cdk Drap and drop not working as expected during search functionality在搜索功能期间，Angular cdk 拖放无法按预期工作
【发布时间】：2019-07-20 18:35:49
【问题描述】：

我已经使用搜索功能实现了角度拖放，在正常流程中，它工作正常。但是，当我搜索任何记录并尝试拖放记录的索引时，记录的索引会发生变化，而不是搜索词，而之前的数据出现在数据容器中的索引处，而这些数据会被删除。

 <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);
        }
      }

【问题讨论】：

标签： angular twitter-bootstrap drag-and-drop angular7

【解决方案1】：

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

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

【讨论】：