我目前正在使用Angular 2和https://material.angular.io/cdk/drag-drop/overview的拖放模块。我已经使拖放功能工作。我有两种不同类型的类对象，我希望将它们限制在自己的拖放列表类型中。
这很可能可以通过对列表进行分组来解决，但由于我使用递归，因此出现了其他问题...
目前，我将每个列表都放在同一个组中，这意味着任何东西都可以在每个列表中拖放（cdkDropListGroup，在执行递归部分之前定位在组件中）。
我试图使列表限制为只接受元素或属性（但不是两者），但我不知道如何做到这一点。
我有以下内容：
类别：

export class Attribute {
name: string;
type: string;

}

export class Element {
    id: number;
    name: string;
    elements: Element[]
    attributes: Attribute[];

}

超文本标记语言：

<div > 
Elements             
<div
  cdkDropList    
  [cdkDropListData]="elements"
  class="example-list"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="isElement">
<div type="button" text-align="right" class="btn btnNotInline" (click)="addNewElement()">
  <img src="assets/img/IconPlus.png" class="elementListIcon"></div>
<div *ngFor="let element of elements" class="example-box" cdkDrag>
  <mat-list>
    <mat-list-item> 
      <mat-form-field appearance="standard dense" class="example-container">
        <input matInput placeholder="{{element.name}}"> 
      </mat-form-field>
    </mat-list-item>
    <mat-list-item>
      <div
        cdkDropList
        [cdkDropListData]="attributes"
        class="cdk-drag-list-attributes"
        (cdkDropListDropped)="drop($event)"
        [cdkDropListEnterPredicate]="isAttribute">
        <div type="button" text-align="right" class="btn btnNotInline" (click)="addNewAttribute()">
          <img src="assets/img/IconPlusPurple.png" class="elementListIcon"></div>
        <div *ngFor="let attribute of attributes" class="example-container" cdkDrag>
          <p class="mat-input-element-attribute">  
            <input matInput placeholder="{{attribute.name}}">
            <input matInput placeholder="{{attribute.type}}">
          </p> 
        </div>
      </div>
    </mat-list-item>
    <mat-list-item> 
        <app-listboardelement [attributes]="element.attributes" [elements]="element.elements"></app-listboardelement>
    </mat-list-item>
  </mat-list>
</div>

被调用的ts.方法（属性看起来很相似）

isElement(drag : CdkDrag){
      console.log("check " + (drag instanceof Element) +  typeof drag + " , "+ typeof drag.data + ", "+ drag.data + " , " +(drag.data instanceof Element));
      return (drag.data instanceof Element);
    }

从输出中，我简单地得到：“check false object，undefined，undefined，false”从这里我试着将拖动的对象与一个类进行比较。但我没找到
有没有什么方法可以动态地将拖动对象限制在某些列表中？我知道[cdkDropListConnectedTo]，但这给了我递归和绑定的问题。任何指导将不胜感激
编辑：添加了图像，用于演示它是如何显示的-但不能正常工作;