web-dev-qa-db-ja.com

パイプの更新を手動でトリガーする

_*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()関数に何かを追加して、パイプを更新することです...

angularangular-pipe
12
ncohen

Pure Pipeがimpureになる1つの方法は、parameterをPipeに。

更新したい場合は、パラメータを変更してください。

パラメータなしの別の方法：

ピュアパイプは、その入力に新しいインスタンスがあるときに発生します。 TypeScript 2.1+では、以下のコードは元のオブジェクトを新しいインスタンスでコピーし、純粋なパイプが起動されるようにします。

let copy = { ...original }

両方の方法がstackbliz demoに含まれています。

9
Pengyy

入力用のオブジェクトを含む純粋なパイプは、オブジェクトのreferenceが変更された場合にのみ更新を発行します。

オブジェクトの構造が一部変更されたときに、オブジェクトがreplacedになる新しい方法を見つけることができる場合、純粋なパイプは必要に応じて出力を自動的に更新します。

既存のdelName関数は、既存の構造から1つの要素を削除するだけであると仮定します。

this.elements.remove(0);

this.elementsを新しいバージョンに置き換えることで更新できます。

this.elements = this.elements.splice(0, 1);
0
Alex Peters