Fehler bei der Verwendung von mehreren sortierbaren Listen mit einer Drag-and-Drop-Bibliothek

Question

Ich arbeite mit einigen library for drag-and-drop ng2-dnd (eckige 2-Bibliothek), und für eine Liste seine Arbeit Wonderfull für mich, es ist eine sehr einfache Implementierung, es sieht so aus:

<md-content> 

    <h1 align="center">{{title}}</h1> 

    <div *ngIf="showingListOne"> 
    <div dnd-sortable-container [sortableData]="listOneToDisplay | async"> 
     <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i"> 
     ID: {{item.id}} <p></p> name: {{item.name}} 
     </div> 
    </div><br><br> 
    <div class="list-bg">Current Matcher {{matcherBulksToDisplay | async | json}}</div> 
    </div> 


    <div *ngIf="showingListTwo"> 
    <div dnd-sortable-container [sortableData]="listTwoToDisplay | async"> 
     <div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i"> 
     ID: {{item.id}} <p></p> age: {{item.age}} 
     </div> 
    </div> 
    <div>Current Expedite {{expediteBulksToDisplay | async | json}}</div> 
    </div> 


    <div *ngIf="showingListThree"> 
    <div dnd-sortable-container [sortableData]="listThreeToDisplay | async"> 
     <div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i"> 
     ID: {{item.id}} <p></p> age: {{item.age}} 
     </div> 
    </div> 
    <div>Current Cropping {{croppingBulksToDisplay | async | json}}</div> 
    </div> 

</md-content> 

Ich habe 3 Schaltflächen, die 3 verschiedene Listen auf der gleichen Komponente, aber jeder zu seiner Zeit.

weiß jemand, warum würde wenn nur mit der ersten Liste arbeiten? der einzige Unterschied ist, dass in der 2. und 3. Listen im age anstelle des Namens ziehen.

es macht mich verrückt, weil es den gleichen Code, aber nur die erste Liste ist sortierbar und die andere nicht, vielleicht ist es etwas mit der Bibliothek?

bitte helfen:/

Answer 1

[Bearbeiten] Hier ist ein funktionierendes plunker.

Unser Netzwerk hat heute einige Probleme, daher konnte ich keine Plunkr für Sie erstellen. Wenn Sie fork und fügen Sie die folgenden über den Code in app.ts, sollten Sie es in Aktion sehen.

Sie können erreichen, was Sie wollen mit useFactory. Das Problem besteht darin, dass Sie drei Listen verwenden, die versuchen, einen Dienst, einen Singleton, zu verwenden. Versuchen Sie folgendes:

1. Import von @ Winkel/Kern
2. Import SortableComponent von NG2-DND/NG2-dnd
3. die Funktion liefern hinzufügen bewiesen unten an Ihren Provider-Array. Jetzt erstellt jede Ihrer Listen eine eigene Instanz des Dienstes

4. Vergessen Sie nicht, Drop-Zonen zu Ihren separaten Listen hinzuzufügen, oder Sie können sie tatsächlich alle zusammen verwickeln.

   import {Component, provide} from '@angular/core'; 
   import {bootstrap} from '@angular/platform-browser-dynamic'; 
   import {Observable} from 'rxjs/Observable'; 
   
   import {DND_PROVIDERS, DND_DIRECTIVES, SortableComponent} from 'ng2-dnd/ng2-dnd'; 
   
   @Component({ 
       selector: 'app', 
       directives: [DND_DIRECTIVES], 
       providers: [DND_PROVIDERS, provide(SortableComponent {useFactory:() => return new SortableContainer()})], 
       template: ` 
   <div class="container"> 
       <div> 
       <h1 align="center">{{title}}</h1> 
   
   
       <div *ngIf="showingListTwo"> 
       <div dnd-sortable-container [dropZones]="['zone1']" [sortableData]="listTwoToDisplay"> 
        <div class="list-bg" style="background:pink;border:1px solid blue" *ngFor="#item of listTwoToDisplay; #i = index" dnd-sortable [sortableIndex]="i"> 
        ID: {{item.id}} <p></p> age: {{item.age}} 
        </div> 
       </div> 
   
       </div> 
   
   
       <div *ngIf="showingListThree"> 
       <div dnd-sortable-container [dropZones]="['zone2']" [sortableData]="listThreeToDisplay"> 
        <div class="list-bg" style="background:yellow;border:1px solid blue" *ngFor="#item of listThreeToDisplay; #i = index" dnd-sortable [sortableIndex]="i"> 
        ID: {{item.id}} <p></p> age: {{item.age}} 
        </div> 
       </div> 
   
       </div> 
   
   </div>` 
   }) 
   export class AppComponent { 
   
       showingListOne = true; 
       showingListTwo = true; 
       showingListThree = true; 
   
       listOneToDisplay = [ 
        {id:1, name: 'Frank'}, 
        {id:2, name: 'Bill'}, 
        {id:3, name: 'Bob'}, 
        {id:4, name: 'Sue'}, 
        ]; 
   
       listTwoToDisplay = [ 
        {id:1, age: 13}, 
        {id:2, age: 22}, 
        {id:3, age: 32}, 
        {id:4, age: 19}, 
        ]; 
   
       listThreeToDisplay = [ 
        {id:1, age: 23}, 
        {id:2, age: 32}, 
        {id:3, age: 34}, 
        {id:4, age: 12}, 
        ]; 
   
   
       constructor() { 
       } 
   
   } 
   
   
   
   bootstrap(AppComponent); 
   

Ich hoffe, das hilft!