1

是否可以使用 cdk 拖放重新排列 ng-select 中的多个选择值。您可以检查Stackblitz 实施正在更改模型值，但未反映在下拉列表中。用户可以使用 cdk Drap and Drop 重新排列下拉列表中的多个选定值的方式。带有 cdk 的 ng-select 的 HTML 拖放

<label>Drap and drop</label>
<ng-select cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations"
  [(ngModel)]="selectedLocations" [items]="Locations" [searchable]="true" bindLabel="name"  [multiple]="true"
  placeholder="Select Locations">
  <ng-template ng-label-tmp let-item="item" let-clear="clear">
    <div cdkDrag>
      <span
        class="ng-value-icon right"
        (click)="clear(item)">×
      </span>
      <span>{{item.name}}</span>
    </div>
  </ng-template>
</ng-select>
<p> {{selectedLocations|json}}</p>

图 1

图 2

是否可以将此功能与 ng-select 或任何其他建议一起使用以实现相同目的。

4

1 回答 1

1

我能看到你实现这一目标的唯一方法是“混合”两个“结构”

一个是 cdkDropList，但水平方向，像这样 https://stackblitz.com/angular/eqqmymbjevo?file=src%2Fapp%2Fcdk-drag-drop-horizo ​​ntal-sorting-example.ts

还有一个隐藏的下拉列表，当您单击您选择的 V 图标时显示。对于下拉列表的每个项目，您附加一个（单击）事件，触发一个方法将其添加到 cdkDropList 源数组中，然后将其从下拉源列表中删除。

对于在 cdkDropList 源中添加的每个项目，附加一个方法以删除自身并将其添加回下拉列表...

这是一个不错的选择...可能需要一段时间，但会成功的

于 2021-05-14T19:30:51.303 回答