J'ai un scénario simple qui ressemble à peu près à l'exemple de glisser & déposer fourni dans la vitrine primeNg.Angular2 primeNg glisser et déposer pas workinf si pDroppable est dans une boucle * ngFor
J'ai un tableau de 'draggableThings' qui représente les objets qui peuvent être déplacés. Tel draggableThings apparaissent sur l'écran sous la forme d'une colonne (sur le côté gauche du navigateur juste pour des raisons de détails).
J'ai aussi un tableau de « paniers » où les draggableThings peuvent être déposés. Les paniers apparaissent à l'écran sous la forme d'une rangée au bas de l'écran.
Mon problème est que si je crée la ligne de paniers avec une boucle *ngFor, la directive pDroppable semble ne pas fonctionner (à savoir l'événement onDrop n'est pas appelé lors de la suppression d'un droppableThing dans un panier).
Voici le code 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>
Dans ce drag html & drop fonctionne correctement pour BasketA et Basketb mais dose ne fonctionnera pas pour les paniers créés dans le cadre de la boucle *ngFor.
Toute aide est très appréciée.
Merci à l'avance