title: Angular Drag and Drop Enter Predicate
body: <p>I'm trying to restrict a drag and drop based on the existing items in the drop list.  </p>
  
  <pre><code>&lt;div class="line" [cdkDropListEnterPredicate]="filledPosition" cdkDropList
  #fwdLine1="cdkDropList" [cdkDropListData]="f1" 
  [cdkDropListConnectedTo]="[forwardPlayers]" 
  (cdkDropListDropped)="drop($event)"&gt;
  
  &lt;div *ngFor="let fwd of f1" cdkDrag [cdkDragData]="fwd"&gt;
      &lt;div class="player"&gt;
          &lt;span&gt;{{fwd.number}} {{fwd.name}} {{fwd.position}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The issue is that I can't call an instance variable inside of the predicate function:</p>
  
  <pre><code>filledPosition(item: CdkDrag&lt;Skater&gt;) {
  
  var currentPos = item.data.position;
  for (let i = 0; i &lt; this.f1.length; i++) {
    if (this.f1[i].position == currentPos) {
      return false
    }
  }
  
  return true;
  
  }
  </code></pre>
  
  <p>"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.</p>
  
  <pre><code>constructor() {
  
  this.f1 = [];
  
  }
  </code></pre>