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

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

尽管我不确定您要构建的是什么，对于不同的列表具有不同的功能似乎更为自然。您要拖放什么？什么时候应该将其拖放到列表中？什么时候不应该？

Answer 2

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

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

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

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

您无法在模板中调用filledPosition(drag, drop, '1')"。它将立即进行评估，并将布尔值发送给[cdkDropListEnterPredicate]绑定，而不是它想要的函数。

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

2 个答案: