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

Question

我有一个简单的场景，它与 primeNg 展示中提供的拖放示例非常相似。

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

我还有一组“篮子”，可以将draggableThings放在其中。篮子在屏幕底部以一行的形式出现在屏幕上。

我的问题是，如果我创建带有循环的篮子行，该指令似乎不起作用（即，将droppableThing放入一个篮子时不会调用该事件）。*ngForpDroppableonDrop

这是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 中，拖放对于BasketA和BasketB可以正常工作，但对于作为循环的一部分创建的篮子不起作用。*ngFor

非常感谢任何帮助。

提前致谢

Answer 1

我用类似类型的示例（汽车和销售）做了一个演示。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 的值应为小写。不知何故，骆驼案例值不起作用。