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

Question

我使用角度2来实现具有以下包的多重排序d＆amp; 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"}]

这是截图：

正如您在第二个屏幕截图中看到的那样，即使在过滤＆＃39; xyz＆＃39;之后，我也尝试对此项目进行评分。不管怎样，错误的项目被拖放（该指数存在的那个）

Answer 1

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