AngularJS2パイプフィルター後のバインディングの喪失

Question

単純なngForを作成してアイテムのリストを表示し、パイプでフィルターに掛けようとしています。

問題は、私がパイプを使用してアイテムを削除すると、アレイからそれを選択しても表示が更新されないということです。

Plunker

マイパイプコード：

class MyFilterPipe { 
    transform(list,remove){ 
     return list.filter((item)=>item.name != remove); 
    } 
} 

テンプレートコード：

<ul> 
    <li *ngFor="#item of list |myFilter:'F' ">{{item.name}} <button (click)="deleteMe(item)">Delete</button></li> 
</ul> 

おかげ アビ

Answer 1

つのカテゴリがあります。：純粋なおよび不純な。

角度は、入力値に対して純粋な変更を検出した場合にのみ、純粋なパイプを実行します。純粋な変更は、プリミティブ入力値（String、Number、Boolean、Symbol）または変更されたオブジェクト参照（Date、Array、Function、 オブジェクト）への変更です。

Angularは、部品交換検出サイクルごとにの間に不純なパイプを実行します。不純なパイプは、すべてのキーストロークやマウスの移動と同じように、多くの場合呼ばれます。

Slice方法は、あなたのパイプが純粋あるので、角度はパイプを実行せず、表示が更新されていない、list配列の参照を変更されません。

使用不純パイプ

@Pipe({ 
    name: 'myFilter', 
    pure: false 
}) 

又はそれから項目を除去しながらlist性基準を変更します。