0

I'm trying to restrict a drag and drop based on the existing items in the drop list. 

<div class="line" [cdkDropListEnterPredicate]="filledPosition" 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>

The issue is that I can't call an instance variable inside of the predicate function:

filledPosition(item: CdkDrag<Skater>) {

var currentPos = item.data.position;
for (let i = 0; i < this.f1.length; i++) {
  if (this.f1[i].position == currentPos) {
    return false
  }
}

return true;

}

"this.f1" returns undefined even though I give it an empty array in the constructor. If this.f1 has a certain value, I want to restrict access to the drop list.

constructor() {

this.f1 = [];

}
The Hawk
  • 1,496
  • 6
  • 26
  • 43
  • Try defining `filledPosition` as an arrow function: `filledPosition = (item: CdkDrag) => { ... }`. – ConnorsFan Jan 31 '19 at 01:16
  • @ConnorsFan The arrow function worked. Put it as an answer so you get credit. – The Hawk Jan 31 '19 at 15:26
  • Good! Thanks for suggesting to post an answer but this question has already been asked many times on StackOverflow and doesn't need more answers. You can confirm the duplicate. – ConnorsFan Jan 31 '19 at 15:28

0 Answers0