角度拖放传递附加参数以输入谓词答案

【问题标题】：Angular Drag and Drop Pass Additional Argument to Enter Predicate角度拖放传递附加参数以输入谓词
【发布时间】：2019-06-26 06:49:22
【问题描述】：

在我的 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;

}

【问题讨论】：

标签： angular drag-and-drop angular-cdk

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

虽然我不确定您正在构建什么，但为不同的列表提供不同的功能似乎更自然。你在拖放什么？什么时候应该可以放到列表中，什么时候不可以？

【讨论】：

你设置曲棍球阵容。有四行，每行都有一个位置（LW，C，RW）。所以我只希望允许位置匹配的球员到位。