2017-09-24 10 views
1

私はAngular2と4の新機能です。 クラス(アイテム)のアイテムのリストがあります。 項目項目は名前、価格、および説明です。 ユーザーがアイテムの名前を入力すると、正しいアイテムオブジェクトが表示されます。アンケート2の検索ボックスでオブジェクト全体が返されない

私はこの例に従った:http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html しかし、それは仕事をしなかった、私は文字列の間でタイプアイテムのオブジェクトではないと思った。あなたはちょうどこのようなあなたのAngular2パイプに変換メソッドのreturn文を更新する必要があるオブジェクトの配列を使用して、チュートリアルのコードを使用した場合

+0

のようなものは、あなたのコードを投稿することができ、カスタムパイプを作成し、そのパイプに検索パラメータを渡しますか? – Yogesh

答えて

1

return value.filter(function (el: any) { 
       return el.name.toLowerCase().indexOf(input) > -1; 
      }) 

PS:el.nameを追加しましたが、説明や好きなものを検索できます。

0

は、たとえば以下の

<li *ngFor="let n of list | FilterPipe: queryString : searchableList "> 
     {{n.name}} ({{n.age}}) 
</li> 

this.searchableList = ['name','age'] 

そして、あなたのカスタムパイプ

@Pipe({ 
    name: 'FilterPipe', 
}) 
export class FilterPipe implements PipeTransform { 
    transform(value: any, input: string,searchableList : any) { 
     if (input) { 
      input = input.toLowerCase(); 
      return value.filter(function (el: any) { 
       var isTrue = false; 
       for(var k in searchableList){ 
        if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){ 
        isTrue = true; 
        } 
        if(isTrue){ 
        return el 
        } 
       } 

      }) 
     } 
     return value; 
    } 
} 

More info

関連する問題