未能通过拖放库使用多个可排序列表

Question

即时通讯工作与一些library for drag-and-drop ng2-dnd（角度2库），和一个列表其工作Wonderfull对我来说，它的一个非常简单的实现，它看起来像这样：

<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> 

我有3个按钮，同一组件上呈现3个不同的列表，但是每个在其时间。

没有人知道为什么会只使用第一个列表？ 唯一的区别是在第二个和第三个列表中我拉age而不是名称。

其驱使我疯狂导致其相同的代码，但只有第一个列表是可排序的，而另一个不是，也许是它与图书馆的东西？

请帮助：/

Answer 1

[编辑]这是一个工作plunker。

我们的网络今天有些问题，所以我无法为您创建一个plunkr。如果分叉this plunkr并将以下代码粘贴到app.ts中的代码中，则应该看到它在执行。

你可以用useFactory完成你想要的。问题是你有三个列表试图使用一个服务，一个单身。试试这个：

1. 从进口角度@ /芯
2. 进口SortableComponent证明从NG2-DND/NG2-DND
3. 下面添加功能提供你提供一个存储。现在，每个列表都将创建自己的服务实例

4. 不要忘记将拖放区域添加到单独的列表中，或者实际上可以将它们全部缠绕在一起。

   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); 
   

我希望这有助于！