我試圖在角度 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: ""})
}
uj5u.com熱心網友回復：
添加新的優先級項時，會將children屬性初始化為空字串。
createNewPrioridad(){
this.fleet.push({Item: "",children: ""})
}
因此，在這種情況下， div.example-listwith thecdkDropList不會呈現，因為該*ngIf子句的計算結果為false
<div class="example-list" *ngIf="item.children"
cdkDropList
[cdkDropListData]="item.children"
(cdkDropListDropped)="drop($event)"
>
改為初始化children為空陣列[]并用css給出div最小高度，問題應該得到解決。
干杯
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420571.html
標籤：
上一篇：PrimeNG的p-pickList是否在更改源和目??標？
下一篇：MatTable獲取每行的多個值