应用过滤器后 ng2-dnd 错误项目被拖放（多排序）

Question

我正在使用 angular 2 通过以下包实现多排序 d&d https://www.npmjs.com/package/ng2-dnd.

我可以将项目从一个容器拖放到另一个容器，反之亦然。但是，当我过滤和项目然后尝试拖动错误的项目被拖放到另一个容器中（通常应用该索引的容器而不是实际存在的容器）。这可能是因为代码使用了 sortableIndex

代码如下：

<div>
 <h4>Groups</h4>
    <div class="row">
      <div class="col-sm-5">
        <div class="panel panel-warning">
          <div class="panel-heading">
            Available Groups
          </div>
          <div>
              <input type="text" class="form-control" name="" placeholder="search" [(ngModel)]="name"/>
          </div>
          <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listBoxers">
            <ul class="list-group" >
              <li *ngFor="let item of listBoxers | DataFilterPipe: name; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-sm-5">
        <div class="panel panel-success">
          <div class="panel-heading">
            Selected Groups
          </div>
          <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamOne">
            <ul class="list-group" >
              <li *ngFor="let item of listTeamOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

</div>

listBoxers:Array<object> = [];
listTeamOne:Array<object> = [];

this.listBoxers= [{id:"1",name:"ABC"}, {id:"2", name:"erwxyz"},{id:"2", name:"sdaxyz"},{id:"3", name:"sdxyz"},{id:"4", name:"xyz"}]

截图如下：

如您在第二个屏幕截图中所见，即使在过滤 'xyz' 之后，我仍尝试对此项进行分级。但是，拖放了错误的项目（该索引处的项目）

Answer 1

我用 (ngModelChange) 代替过滤管 (DataFilterPipe)。然后为(ngModelChange)写了一个自定义函数。成功了。

应用过滤器后 ng2-dnd 错误项目被拖放（多排序）

ng2-dnd wrong item getting dragged and dropped(multi sortable) after applying filter

drag-and-drop

angular2-services

angular