Как отключить CDK Drop из-за условия - PullRequest
Новая
       13

Как отключить CDK Drop из-за условия

0 голосов
/ 16 марта 2020

Я пытаюсь найти способ, как отключить удаление с помощью CDK из-за некоторых условий. Если список, который я хочу удалить, пуст, должен быть отключен. Я не смог найти способ сделать это внутри метода в .ts file.Есть несколько директив HTML для этого, но это не полезно для меня. 

if(event.container.data.length==1){
  event.previousContainer.disabled=true;
}

Я нашел этот метод .disabled для перетаскиваемых контейнеров, но он работает только тогда, когда я перетаскиваю. Мне нужно событие для drop.

https://stackblitz.com/edit/angular-ui7u9m?file=src / app / cdk-drag-drop-disabled-sorting-example.ts

В этом примере стекаблица есть два списка, например когда списки Avilable пусты (элементов в массиве нет), удаление из этого списка больше не разрешается. Не могли бы вы помочь мне сделать это?

1 Ответ

2 голосов
/ 16 марта 2020

Вы можете использовать Angular Материал enterPredicate из CdkDropList ( Документы )

@ Input ('cdkDropListEnterPredicate')

enterPredicate : (drag: CdkDrag, drop: CdkDropList) => логическое значение

Функция, используемая для определения, разрешено ли перемещение элемента в контейнер для отбрасывания.

Например:

html: 

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

компонент: 

  canDrop() {
    return this.basket && this.basket.length > 0;
  }

Проверить прикрепленный Stackblitz .

Редактировать 1 :

Дополнительно вы можете использовать прикрепленный список, где вы также сбросили: 

  canDrop(item: CdkDrag, list: CdkDropList) {    
    console.log(list.getSortedItems().length)
    return list && list.getSortedItems().length && list.getSortedItems().length > 0;
  }

Редактировать 2:

Вы можете перезаписать функция для передачи параметра: 

...
[cdkDropListEnterPredicate]="dropListEnterPredicate(basket)">
...

  dropListEnterPredicate(list: []){
    return function(drag: CdkDrag, drop: CdkDropList) {
        return list.length > 0;
    };
...