Angular 拖放传递附加参数以输入谓词

Question

在我的 Angular 拖放下拉列表中，我想向“[cdkDropListEnterPredicate]”函数传递一个额外的参数。默认情况下，它发送一个 CdkDrag 和 CdkDropList，但我有几个下拉列表，所以我只想要一个输入谓词函数。这是我的 .html 文件：

<div class="players" [cdkDropListEnterPredicate]="filledPosition(drag, drop, '1')"
    cdkDropList #fwdLine1="cdkDropList" [cdkDropListData]="f1" 
    [cdkDropListConnectedTo]="[forwardPlayers]" 
    (cdkDropListDropped)="drop($event)">

    <div *ngFor="let fwd of f1" cdkDrag [cdkDragData]="fwd">
        <div class="player">
            <span>{{fwd.number}} {{fwd.name}} {{fwd.position}}</span>
        </div>
    </div>
</div>

这是 .ts 文件中的函数：

filledPosition = (item: CdkDrag<Skater>, list: CdkDropList, line) => {

    if (line == "1") checkLine = this.f1;

    console.log(item, list, line)

    if (checkLine.length >= 3) {
        return false;
    }

    return true;

}

Answer 1

使用返回另一个函数的函数：

dropListEnterPredicate(id: number){
    return function(drag: CdkDrag, drop: CdkDropList) {
        return false;
    };
}

并调用模板中的外部函数：

[cdkDropListEnterPredicate]="dropListEnterPredicate('1')"

你不能filledPosition(drag, drop, '1')"在模板中调用。它将立即被评估并向[cdkDropListEnterPredicate]绑定发送一个布尔值而不是一个函数，这是它想要的。

Answer 2

可以为每个列表分配一个具有输入属性的唯一 ID https://material.angular.io/cdk/drag-drop/api。也许为每个列表分配一个唯一的 ID，然后使用 switch 语句在谓词中检查该 ID。我假设每个列表 ID 都可以通过 list.id 或谓词函数内部的某种 getter 函数（如 list.id() ）访问。

尽管我不确定您正在构建什么，但对于不同的列表具有不同的功能似乎更自然。你在拖放什么？什么时候应该将其放入列表中，什么时候不可以？