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

Question

im试图在angular 7中实现普通拖放(有角度的材质(。情况是这样的：我在一个扩展面板中有多个对象；"优先级"；，我想在优先级/扩展面板之间移动对象(实际工作(。但是，当我尝试添加一个新的空"时，问题就开始了；"优先级"；，然后，当我试图将一个对象拖放到新的优先级时，它不起作用：

这是问题的gif

这是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: ""})
}

因此，具有cdkDropList的div.example-list在这种情况下不会呈现，因为*ngIf子句的求值结果为false

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

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

欢呼