如何根据条件禁用 CDK Drop

Question

我正在尝试找到一种方法如何通过使用 CDK 来禁用删除，因为一些 conditions.If 我想删除的列表是空的 disabled.I 找不到方法来在 .ts file.There 中的方法中执行此操作是一些 HTML 指令，但对我没有用。

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

我发现了这种用于拖动容器的 .disabled 方法，但它仅在我 Drag.I 需要删除事件时有效。

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

在这个 stackblitz 示例中，有两个列表，例如当 Avilable 列表为空（数组中没有元素）时，不应再允许删除此 list.Could 你能帮我做吗？

Answer 1

您可以使用 CdkDropList (Docs)

中的 Angular Material enterPredicate

@Input('cdkDropListEnterPredicate')

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.

例如：

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;
    };

Answer 2

您可以将 cdkDragDisabled 与 cdkDrag 元素一起使用。

<div *ngFor="let item of items" cdkDrag [cdkDragDisabled]="canDrag">...</div>

如何根据条件禁用 CDK Drop

How to disable CDK Drop due to condition

typescript

angular

angular-cdk