angular - 过滤时使用 transferArrayItem 的角度拖放指向错误的索引号（工作示例）

Question

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

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

肖恩

标签： angularangular-material

Answer 1

你应该使用itemsFilteredas 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>

堆栈闪电战