Angular Drag and Drop Pass дополнительный аргумент для входа в предикат

В моем списке Angular Drag and Drop я хочу передать дополнительный аргумент функции «[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
person The Hawk    schedule 01.02.2019    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Используйте функцию, которая возвращает другую функцию:

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

И вызовем внешнюю функцию в шаблоне:

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

Вы не можете вызвать filledPosition(drag, drop, '1')" в шаблоне. Он будет немедленно оценен и отправит логическое значение привязке [cdkDropListEnterPredicate] вместо функции, чего она хочет.

person Kevin Beal    schedule 16.09.2019

arrow_upward
1
arrow_downward

Каждому списку можно присвоить уникальный идентификатор с помощью свойства ввода https://material.angular.io/cdk/drag-drop/api. Возможно, назначьте уникальный идентификатор каждому списку, а затем проверьте этот идентификатор в своем предикате с помощью оператора switch. Я предполагаю, что каждый идентификатор списка будет доступен с помощью list.id или какой-либо функции получения, такой как list.id (), внутри функции предиката.

Хотя я не совсем уверен, что вы создаете, и было бы более естественно иметь разные функции для разных списков. Что вы перетаскиваете? Когда его следует отбрасывать в список, а когда нет?

person San Francisco Sunrise    schedule 01.02.2019
comment
Вы устанавливаете хоккейные расстановки. Есть четыре линии, каждая с позицией (LW, C, RW). Поэтому я хочу, чтобы игроки, чьи позиции соответствовали друг другу, вышли на место. - person The Hawk; 01.02.2019