1

オブジェクトの配列のフィルタリングを実行するためのフィルター パイプを作成しました。このパイプはfilterArgs、項目をフィルタリングする基準となるいくつかのプロパティを含むオブジェクトを取得します。

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: Item[], filterArgs: any): Item[] {
        return items.filter(item => ...);
    }
}

さらに、ユーザーがフィルター引数を設定できる入力フィールドがいくつかあります。オブジェクトのプロパティを直接バインドし、filterArgs次のようにアイテムにフィルターを適用します。

<input type="date" [(ngModel)]="filterArgs.dateFrom">
<input type="date" [(ngModel)]="filterArgs.dateTo">

<ul>
    <li *ngFor="let item of items | filter:filterArgs>...</li>
</ul>

私のコンポーネントでは、filterArgsオブジェクトは次のように定義されています (概略図):

public filterArgs: any;

ngOnInit() {
    this.filterArgs = {
        dateFrom = undefined,
        dateTo = undefined
    };
}

したがって、問題は、入力フィールドの 1 つが変更されたときにフィルターが適用されないことです。私がAngularの変更検出を理解している限り、これはfilterArgsオブジェクトの参照が変更されないため、Angularは変更を検出しないためです。これは予期された動作であり、仕様によるものです。

私の質問は次のとおりです。この問題を解決するために提案された方法は何ですか?

単純なアプローチはfilterArgs、入力フィールドが変更されるたびに新しいオブジェクトを作成して、このオブジェクトの参照が更新されるようにすることです。その場合、Angular の変更検出が有効になります。しかし、これを行うためのより良い方法が必要です。filterArgs変更を検出するために「詳細なオブジェクト比較」を実行するようAngularに指示する何らかの属性でプロパティに注釈を付けることができると思います。

4

1 に答える 1

2

コンポーネントとディレクティブの場合DoCheck、カスタム変更検出を実行するために実装できますが、パイプの場合、これはサポートされていません。

または、次を使用してパイプを「最適化」することもできます

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

フィルターが変更されなかった場合は、キャッシュされた結果を返します

于 2016-05-05T15:37:06.717 に答える