angular - Wie man CDK Drop aufgrund einer Bedingung deaktiviert

Ich versuche, einen Weg zu finden, wie man das Ablegen unter Verwendung von CDK aufgrund bestimmter Bedingungen deaktivieren kann. Wenn die Liste, die ich ablegen möchte, leer ist, sollte das Ablegen deaktiviert werden. Ich konnte keinen Weg finden, dies innerhalb einer Methode in der .ts-Datei zu tun. Es gibt einige HTML-Direktiven dafür, die für mich jedoch nicht nützlich sind.

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

Ich habe diese .disabled-Methode für gezogene Container gefunden, aber sie funktioniert nur, wenn ich ziehe. Ich brauche ein Ereignis zum Loslassen.

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

In diesem Stackblitz-Beispiel gibt es zwei Listen. Zum Beispiel, wenn die Verfügbare Liste leer ist (keine Elemente im Array), sollte das Ablegen in diese Liste nicht mehr erlaubt sein. Könnten Sie mir dabei helfen?

Antwort #1

Sie können das Angular Material enterPredicate aus CdkDropList (Dokumentation) verwenden

@Input('cdkDropListEnterPredicate')

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

Funktion, die verwendet wird, um festzustellen, ob ein Element in einen Zielcontainer verschoben werden darf.

z. B.

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>

Komponente:

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

Überprüfe den angehängten Stackblitz.

Bearbeiten 1:

Zusätzlich können Sie die beigefügte Liste verwenden, wo Sie ebenfalls aufgeführt sind:

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

Bearbeiten 2:

Sie können die Funktion überschreiben, um einen Parameter zu übergeben:

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

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