拖放和在html中创建新元素的问题

Question

我试图在角度 7 中实现动态拖放（角度材料）。情况是这样的： 我在具有“优先级”的扩展面板中有多个对象，我想在优先级/扩展面板之间移动这些对象（实际上可以工作）。但是，当我尝试添加一个新的空“优先级”时，问题就开始了，然后当我尝试将一个对象拖放到新的优先级时，它就不起作用了：

this is the gif of the problem

这是html代码：

    <button (click)="createNewPrioridad()">Create new Priority</button>
    <br>
    <div cdkDropListGroup>
    <mat-expansion-panel *ngFor="let item of fleet" (opened)="panelOpenState = true"
                         (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Priority
        </mat-panel-title>
    
      </mat-expansion-panel-header>
      <div class="example-list" *ngIf="item.children"
      cdkDropList
      [cdkDropListData]="item.children"
      (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of item.children" cdkDrag>
          {{item.item}}
          <button (click)="checkIndex(item)">Checke Index</button>
        </div>
    </div>
    </mat-expansion-panel>
    </div>

这是 ts 代码：

  fleet: any[] = [
    {
      Item: 'Priority 1',
      children: [
        { item: 'Admiral Flankson', tipo: 'Mother' },
        { item: 'pvt. centeras',tipo: 'Son' },
        { item: 'pvt. leeft',tipo: 'Father' },
        { item: 'pvt. rijks',tipo: 'Son' },
      ],
    },
    {
      Item: 'Priority 2',
      children: [
        { item: 'Admiral Parkour', tipo: 'Mother' },
        { item: 'pvt. jumph', tipo: 'Brother' },
        { item: 'pvt. landts', tipo: 'Son' },
        { item: 'pvt. drobs', tipo: 'Son' },
      ],
    },
    {
      Item: 'Priority 3',
      children: [
        { item: 'Admiral Tombs', tipo: 'Father' },
        { item: 'pvt. zomboss', tipo: 'Son' },
        { item: 'pvt. digger', tipo: 'Son' },
        { item: 'pvt. skaari' , tipo: 'Son'},
      ],
    },
  ];



  panelOpenState:any
  drop(event: CdkDragDrop<{}[]>) {
    if (event.previousContainer == event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
    console.log(this.fleet);
  }

  
  checkIndex(item:any){
    console.log(item, 'aca esta el item para editar')
  }

  createNewPrioridad(){
    this.fleet.push({Item: "",children: ""})
  }

Answer 1

添加新的优先级项时，会将children 属性初始化为空字符串。

createNewPrioridad(){
  this.fleet.push({Item: "",children: ""})
}

所以div.example-list 和cdkDropList 在这种情况下不会呈现，因为*ngIf 子句的计算结果为false

<div class="example-list" *ngIf="item.children"
  cdkDropList
  [cdkDropListData]="item.children"
  (cdkDropListDropped)="drop($event)"
>

将children初始化为一个空数组[]，并用css给div一个最小高度，问题应该就解决了。

干杯