2016-06-16 17 views
2

、私はこのような製品の配列を作っ:angular2フィルタリング問題

private products = ["Apple", "Banana", "Orange"];

を、ここで私のフィルタパイプである:私は

import {Pipe} from 'angular2/core'; 

@Pipe({name:'filter'}) 

export class FilterPipe { 
    transform(value, args) { 
     if(!args[0]){ 
      return value; 
     } 
     else if (value) { 
      return value.filter(item => { 
       for (let key in item){ 
        if((typeof item[key]==='string' || item[key] instanceof String) && (item[key].indexOf(args[0]) !== -1)){ 
         return true; 
        } 
       } 
      }); 
     } 
    } 
} 

コンポーネント私は、製品を表示するためにul要素を追加し、それらをフィルタリングするために要素を追加しました。

<input type="text" [(ngModel)]="filterText"> 
       <ul> 
        <li *ngFor="#product of products | filter: filterText"> 
         {{product}} 
        </li> 
       </ul> 

このコードを実行する際の問題は、最初の文字を入力するときにのみ(フィルタ)機能し、もう一度文字が入力されると機能しないことです。どんな助け?あなたが入力したテキスト

'A' => ('Apple') => 'A'.indexOf('A') 'p'.indexOf('A') ... 
'Ap' => ('Apple') => 'A'.indexOf('Ap') 'p'.indexOf('Ap') ... - always false 
'App' => ('Apple') => 'A'.indexOf('App') 'p'.indexOf('App') ... - always false 

で配列から文字列の各文字を比較しようとしている

答えて

2

次のように私はパイプを変更します

@Pipe({name:'filter'}) 
export class FilterPipe { 
    transform(value, args) { 
    if(!args[0]) return value; 
    return value.filter(item => item.indexOf(args[0]) > -1); 
    } 
} 

https://plnkr.co/edit/TpJ6Zu8QovWINqx04KUY?p=preview

を! !それは、角度RCバージョンは次のようになりますためのコード角度2ベータバージョン


です:今、私はまた私のフィルタコードで、問題が、おかげで多くのことを見

@Pipe({ name: 'filter' }) 
export class FilterPipe { 
    transform(value, term) { 
    if (!term) return value; 
    return value.filter(item => item.indexOf(term) > -1); 
    } 
} 
+0

私が変更しましたオブジェクトを配列して動作させる –