使用 transferArrayItem 的 Angular 拖放在过滤时指向错误的索引号(工作示例)

Question

我正在尝试使用 Drag Material CDK 过滤项目列表...当我的列表未被过滤时一切正常，但是当我过滤它并拖放时，我得到了错误的项目(错误的索引) 在 drop 上，我创建了一个工作示例，如您所见，过滤让我们说“av”并将鳄梨拖到放置区域，您将得到 Carrot，因为索引指的是旧数据源，任何想法都值得赞赏，

这里是问题的一个工作示例:https://stackblitz.com/edit/angular-agf3kv-wjxwdm?file=app/cdk-drag-drop-disabled-sorting-example.css

肖恩

Answer 1

您应该使用 itemsFiltered 作为 cdkDopListData。

<div
  cdkDropList
  [cdkDropListData]="itemsFiltered" <-- HERE
  class="example-list"
  cdkDropListSortingDisabled
  (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of itemsFiltered" cdkDrag>{{item}}</div>
</div>

Stackblitz