Angular2 primeNg拖放不起作用，如果pDroppable在*ngFor循环内

Question

我有一个简单的场景，它非常类似于drag&在primeNg展示中提供的空投。

我有一个'draggableThings'数组，表示可以拖动的对象。这样的draggableThings以列的形式出现在屏幕上(在浏览器的左侧只是为了详细信息)。

我还有一组">篮子"，其中可以放下可拖动的东西。购物篮在屏幕上显示为屏幕底部的一行。

我的问题是，如果我用*ngFor循环创建一行baskets，pDroppable指令似乎不起作用(即，当将dropableThing放入一个baskets时，不会调用onDrop事件)。

这是html代码：

<div class="ui-grid ui-grid-pad ui-grid-responsive">
<div id="plan-area" class="ui-grid-row">
<!-- ************************  -->
<!--     LEFT SIDEBAR          -->
<!-- ************************  -->
<div class="ui-grid-col-1 ui-widget-content">
<ul style="margin:0;padding:0">
<li *ngFor="let droppableThing of droppableThings" 
class="ui-state-default ui-helper-clearfix" pDraggable="droppableThings"
(onDragStart)="dragStart($event,droppableThing)" (onDragEnd)="dragEnd($event)">
<dthing [droppableThing]="droppableThing"></dthing>
</li>
</ul>
</div>
<!-- ************************  -->
<!--          CHART AREA       -->
<!-- ************************  -->
<div id="chart-area" pDroppable="droppableThings" (onDrop)="drop($event)" 
class="ui-grid-col-9" [class.ui-state-highlight]="draggedThing">
<div class="planning-timeline" class="ui-grid-row">
<div class="basket">
BasketA
</div>
<div class="basket">
BasketB
</div>
<div *ngFor="let basket of getBaskets(); let i=index" class="basket">
basket {{i}}
</div>
</div>
</div>
</div>
</div>

在这个html拖动&drop适用于BasketA和BasketB，但不适用于作为*ngFor循环一部分创建的篮。

非常感谢您的帮助。

提前感谢

Answer 1

我用类似类型的例子(Cars and Sale)做了一个演示。https://stackblitz.com/edit/primeng-drag-and-drop

这是我的密码。

app.component.ts

import { Component } from "@angular/core";
import { Sale } from "./domain/sale";
import { Car } from "./domain/car";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .drag-column {
padding-right: 0.5em;
}
:host ::ng-deep .drop-column {
border: 1px solid #c8c8c8;
background-color: #ffffff;
}
.ui-g li {
list-style-type: none;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #c8c8c8;
background-color: #ffffff;
}
`
]
})
export class AppComponent {
sale1: Sale;
sale2: Sale;
sales: Sale[];
availableCars: Car[];
draggedCar: Car;
constructor() {}
ngOnInit() {
this.sale1 = { id: 1, name: "Sale 1", cars: [] };
this.sale2 = { id: 2, name: "Sale 2", cars: [] };
this.sales = [];
let sale3: Sale = { id: 3, name: "Sale 3", cars: [] = [] };
let sale4: Sale = { id: 4, name: "Sale 4", cars: [] = [] };
let sale5: Sale = { id: 4, name: "Sale 5", cars: [] = [] };
this.sales = [sale3, sale4, sale5];
this.availableCars = [
{ brand: "VW", year: 2012, color: "Orange", vin: "dsad231ff" },
{ brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
{ brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
{ brand: "BMW", year: 2003, color: "Blue", vin: "j6w54qgh" },
{ brand: "Mercedes", year: 1995, color: "Orange", vin: "hrtwy34" },
{ brand: "Volvo", year: 2005, color: "Black", vin: "jejtyj" },
{ brand: "Honda", year: 2012, color: "Yellow", vin: "g43gr" },
{ brand: "Jaguar", year: 2013, color: "Orange", vin: "greg34" },
{ brand: "Ford", year: 2000, color: "Black", vin: "h54hw5" },
{ brand: "Fiat", year: 2013, color: "Red", vin: "245t2s" }
];
}
dragStart(event, car: Car) {
this.draggedCar = car;
}
drop(event, sale: Sale) {
if (this.draggedCar) {
let draggedCarIndex = this.findIndex(this.draggedCar);
sale.cars = [...sale.cars, this.draggedCar];
this.availableCars = this.availableCars.filter(
(val, i) => i != draggedCarIndex
);
this.draggedCar = null;
}
}
dragEnd(event) {
this.draggedCar = null;
}
findIndex(car: Car) {
let index = -1;
for (let i = 0; i < this.availableCars.length; i++) {
if (car.vin === this.availableCars[i].vin) {
index = i;
break;
}
}
return index;
}
getSales() {
return this.sales;
}
}

这是我的

app.component.html

<h3>Drag and Drop to Table</h3>
<div class="ui-g">
<div class="ui-g-12 ui-md-6 ui-g-nopad drag-column">
<ul style="margin:0;padding:0">
<li *ngFor="let car of availableCars" class="ui-helper-clearfix" pDraggable="cars"
(onDragStart)="dragStart($event,car)" (onDragEnd)="dragEnd($event)">
<i class="fa fa-arrows fa-2x" style="float:right;margin-top:8px"></i>
<img src="https://raw.githubusercontent.com/binarathambugala/PrimeNG-drag-and-drop/master/src/app/assets/car/{{car.brand}}.png" style="float:left" draggable="false">
<div style="margin:8px 0 0 8px;float:left">{{car.vin}} - {{car.year}}</div>
</li>
</ul>
</div>
<div class="ui-g-12 ui-md-6 drop-column" pDroppable="cars" (onDrop)="drop($event,sale1)"
[ngClass]="{'ui-highlight-car':draggedCar}">
<p-table [value]="sale1?.cars">
<ng-template pTemplate="caption">
List of Cars : {{sale1?.name}}
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car?.vin}}</td>
<td>{{car?.year}}</td>
<td>{{car?.brand}}</td>
<td>{{car?.color}}</td>
</tr>
</ng-template>
</p-table>
</div>

<div class="ui-g-12 ui-md-6 drop-column" pDroppable="cars" (onDrop)="drop($event,sale2)"
[ngClass]="{'ui-highlight-car':draggedCar}">
<p-table [value]="sale2?.cars">
<ng-template pTemplate="caption">
List of Cars : {{sale2?.name}}
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car?.vin}}</td>
<td>{{car?.year}}</td>
<td>{{car?.brand}}</td>
<td>{{car?.color}}</td>
</tr>
</ng-template>
</p-table>
</div>

<div *ngFor="let sale of getSales()" class="ui-g-12 ui-md-6 drop-column" pDroppable="cars" (onDrop)="drop($event,sale)"
[ngClass]="{'ui-highlight-car':draggedCar}">
<p-table [value]="sale?.cars">
<ng-template pTemplate="caption">
List of Cars : {{sale?.name}}
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car?.vin}}</td>
<td>{{car?.year}}</td>
<td>{{car?.brand}}</td>
<td>{{car?.color}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>

Answer 2

pDraggable&pDroppable应为小写。不知怎的，骆驼案例价值观不起作用。