在 html 中拖放和创建新元素时出现问题

Question

我正在尝试在 angular 7 中实现动态拖放 (angular-material)。案例是这样的：我在具有“优先级”的扩展面板中有多个对象，我想在 priorities/expansion 面板之间移动这些对象（实际工作）。但是，当我尝试添加一个新的空“优先级”时，问题就开始了，然后当我尝试将一个对象拖放到新的优先级时，它不起作用：

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初始化为一个空数组[]，并给div一个最小高度css，问题就应该解决了。

干杯

在 html 中拖放和创建新元素时出现问题

Problem with drag and drop and creating new element in html

angular

typescript

angular-material

angular7