是否可以将cdkDrag放入mat-select中?

时间:2019-01-11 02:04:56

标签: angular-material angular7 angular-cdk

我有一个简单的mat-select元素:

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

在TypeScript中,foods是:

  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

是否可以在垫选元素内使用cdkDrag?我正在尝试实现以下目标:

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <div cdkDropList>
      <div *ngFor="let food of foods">
        <span cdkDragHandle>$$$</span>
        <mat-option [value]="food.value" cdkDrag>
          {{food.viewValue}}
        </mat-option>
      </div>
     </div>
  </mat-select>
</mat-form-field>

但是我无法拖动下拉菜单项。请帮忙!

1 个答案:

答案 0 :(得分:0)

是的!有可能:

<mat-form-field>
  <mat-select placeholder="Favorite food" multiple>
    <div cdkDropList (cdkDropListDropped)="drop($event)">
      <mat-option *ngFor="let food of foods" [value]="food.value" cdkDrag>
        {{food.viewValue}}
        <span cdkDragHandle>$$$</span>
      </mat-option>
      </div>
  </mat-select>
</mat-form-field>

看来,诀窍是将mat-option包装在cdkDropList div内,以便可靠地触发drop事件(cdkDropListDropped)。  Working StackBlitz