パイプを使用して第三者コンポーネント内にリストされたアイテムをフィルタする方法

Question

私の角2コンポーネント内にサードパーティのツリービューコントロールangular2-tree-componentを使用しています。下記のように私はそれを使用しています：

export class TrItem{ 
    itemId: number, 
    name: string, 
    itemDesc: string, 
    blahBlah: string 
} 

nameプロパティは、ツリー内のノードを表示するために使用されます。

ここ nodes

<tree-root [nodes]="nodes"></tree-root> 

がどのように見えるTrItemクラスのオブジェクトの配列です。

<input type="text" [(ngModel)] = "nodeFilter"/> 

は私がそれを行う方法を教えてください：

は、私は下記の通り、我々は入力に入力するようtree-rootコンポーネント内に表示ノードをフィルタするでしょう入力テキスト要素を使用します。

Answer 1

新しいパイプを作成します。

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filterByName' 
}) 

export class FilterByNamePipe implements PipeTransform { 

    transform(value: any[], name:string): any[] { 
    let result: any = []; 
    if (value && name) { 
     value.forEach((item) => { 
     if(item.name.toLowerCase() === name.toLowerCase()) { 
      result.push(item); 
     } 
     }); 
    } 
    else if(value) { 
     result = value; 
    } 

    return result; 
    } 
} 

はあなたのアプリケーション・モジュールに含める：

import { FilterByNamePipe } from "PATH_TO_YOUR_PIPE_CLASS_FILE"; 

は@NgModule(...)のdeclarationsリストを忘れないでください：

declarations: [ 
    //... 
    FilterByNamePipe, 
    //... 
] 

はそれを使用あなたのhtml：

<tree-root [nodes]="nodes | filterByName : nodeFilter"></tree-root> 

このパイプは、nameプロパティの正確な値を持つアイテムを厳密にチェックします。あなたはが以内に自分の名前をフィルタリングされた値が含まれているアイテムをフィルタ処理したい場合、あなたはこの条件に変更する必要があります：何か他のもので

item.name.toLowerCase() === name.toLowerCase() 

を、あなたの要件に依存...多分.indexOf()