mat-form-field内mat-chip列表结合mat-select时拖拽失效如何解决

你拖拽后调整的数组和页面渲染chip的数组不是同一个，才会出现拖拽后回弹的情况，不属于组件兼容性问题。

1. 调整drop方法逻辑 #

你当前drop函数内修改的是全量可选配料数组toppings，但页面上渲染的chip数据源是表单控件存储的已选数组toppingsControl.value，修改前者不会作用于显示层，修改后还需要手动触发表单控件的更新：

drop(event: CdkDragDrop<Topping[]>) {
  // 拿到当前已选的数组
  const selectedToppings = this.toppingsControl.value as Topping[];
  // 调整已选数组内的顺序
  moveItemInArray(selectedToppings, event.previousIndex, event.currentIndex);
  // 重新给表单控件赋值触发变更检测
  this.toppingsControl.setValue(selectedToppings);
}

2. 可选优化：给cdkDropList绑定数据源 #

为了避免拖拽时索引计算异常，建议给mat-chip-list标签绑定对应的数据源：

<mat-chip-list
  cdkDropList
  [cdkDropListData]="toppingsControl.value"
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="drop($event)"
>

你现有代码里onToppingRemoved方法的参数类型标注有误，传入的参数是Topping类型不是string，建议修正避免后续类型报错：

onToppingRemoved(topping: Topping) {
  const toppings = this.toppingsControl.value as Topping[];
  this.removeFirst(toppings, topping);
  this.toppingsControl.setValue(toppings);
}

内容的提问来源于stack exchange，提问作者mntblnk