パイプの更新を手動でトリガーする
_*ngFor
_ with objects を使用できるようにパイプを作成しました。ただし、オブジェクトが更新されると、パイプは更新されません。 _pure: false
_でステートフルパイプを使用することにより、解決策 here を見つけました。
このソリューションは、変更のたびにパイプを更新するため、ユースケースのパフォーマンスの点で許容できません(このパイプをほぼすべての場所で使用して、複雑な要素をレンダリングします)。
パイプの手動更新をトリガーして、必要なときにのみ更新する方法はありますか?
これが plunker です。問題を確認するには、_-
_ボタンをクリックして名前を削除してください。 _pure:false
_を追加すると、機能することがわかります。
_@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.Push({key: key, value: value[key]});
}
return keys;
}
}
_
私が望むのは、delName()
関数に何かを追加して、パイプを更新することです...
Pure Pipeがimpureになる1つの方法は、parameter
をPipe
に。
更新したい場合は、パラメータを変更してください。
パラメータなしの別の方法:
ピュアパイプは、その入力に新しいインスタンスがあるときに発生します。 TypeScript 2.1+では、以下のコードは元のオブジェクトを新しいインスタンスでコピーし、純粋なパイプが起動されるようにします。
let copy = { ...original }
両方の方法がstackbliz demoに含まれています。
入力用のオブジェクトを含む純粋なパイプは、オブジェクトのreferenceが変更された場合にのみ更新を発行します。
オブジェクトの構造が一部変更されたときに、オブジェクトがreplacedになる新しい方法を見つけることができる場合、純粋なパイプは必要に応じて出力を自動的に更新します。
既存のdelName
関数は、既存の構造から1つの要素を削除するだけであると仮定します。
this.elements.remove(0);
this.elements
を新しいバージョンに置き換えることで更新できます。
this.elements = this.elements.splice(0, 1);