Question

我正在使用一些library for drag-and-drop ng2-dnd（有角度的2库），并且为了一个列表，它对我来说是一个非常简单的实现，它看起来像这样：

<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 完成所需的操作。问题是你有三个列表试图使用一个服务，一个单独的服务。试试这个：

import来自@ angular / core
从ng2-dnd / ng2-dnd
将以下提供函数添加到您的providers数组中。现在，每个列表都将创建自己的服务实例
不要忘记将放置区添加到单独的列表中，或者您可以将它们全部纠缠在一起。
```
<button name="submit" type="submit" formnovalidate class="btn btn-success">Save</button>
```

我希望这有帮助！

使用拖放库无法使用多个可排序列表

1 个答案: