ng2-dndフィルターを適用した後に、間違ったアイテムがドラッグアンドドロップされました（マルチソート可能）

Question

角度2を使用して、マルチソート可能なd & dを実装しました。 https://www.npmjs.com/package/ng2-dndです。

アイテムを1つのコンテナから別のコンテナにドラッグアンドドロップすることができます。 しかし、フィルタリングしてアイテムをドラッグしてドラッグしようとすると、他のコンテナ（実際にそこにあるインデックスではなく、一般にインデックスを適用するもの）にドラッグアンドドロップされてしまいます。あなたが第二で見ることができるように

：スクリーンショットをここで

<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"}] 

です：コードはここ

sortableIndex

使用するコードだからかもしれない可能性がありscreenshot、 'xyz'をフィルタリングした後でも、私はこのアイテムを卒業しようとしました。 Howver、間違ったアイテムがドラッグアンドドロップされた（そのインデックスに存在するもの）

Answer 1

フィルタパイプ(DataFilterPipe)の代わりに(ngModelChange)を使用しました。その後、(ngModelChange)のカスタム機能を書きました。それはうまくいった。