如何根据条件禁用 CDK Drop

Question

由于某些条件，我试图找到一种如何通过使用 CDK 禁用删除的方法。如果我想删除的列表为空，则应禁用。我找不到在 .ts 文件中的方法中执行此操作的方法.有一些 HTML 指令，但对我没有用。

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

我找到了用于拖动容器的 .disabled 方法，但它仅在我拖动时有效。我需要一个事件来放置。

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

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

Answer 1

您可以使用enterPredicate来自 CdkDropList( Docs )的 Angular Material

@Input('cdkDropListEnterPredicate')

输入谓词：（拖动：CdkDrag，放下：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;
    };