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) 编写了一个自定义函数。那行得通。