2016-07-05 8 views
0

私はangular2で検索機能を使用しようとしています。angular2 pipe not working

は、これまでのところ、私は以下のように、このために私自身のカスタムパイプを作成しました:

search.pipe.ts

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

@Pipe({ 
    name: 'search', 
    pure: false 
}) 
@Injectable() 
export class SearchPipe implements PipeTransform { 
    transform(components: any[], args: any): any { 
     var val = args[0]; 
     if (val !== undefined) { 
      var lowerEnabled = args.length > 1 ? args[1] : false; 

      // filter components array, components which match and return true will be kept, false will be filtered out 
      return components.filter((component) => { 
       if (lowerEnabled) { 
        return (component.name.toLowerCase().indexOf(val.toLowerCase()) !== -1); 
       } else { 
        return (component.name.indexOf(val) !== -1); 
       } 
      }); 
     } 
     return components; 
    } 
} 

をし、これを実行した後、私は次のようにHTML内でこのパイプを適用しようとしていますこの:

*ngFor="let aComponent of selectedLib.componentGroups[groupCounter].components | search:searchComp:true" 

そのエラーの下に私を与える:

TypeError: Cannot read property '0' of undefined

パイプを適用していないときは、* ngForは配列要素を正しく出力しますが、htmlで検索パイプを適用するとエラーが表示されます。

入力はありますか?

答えて

0

RCの新パイプは、いくつかの引数を取るだけではなく1列:

transform(components: any[], searchComponent: any, caseInsensitive: boolean): any { 
    if (searchComponent !== undefined) { 
     // filter components array, components which match and return true will be kept, false will be filtered out 
     return components.filter((component) => { 
      if (caseInsensitive) { 
       return (component.name.toLowerCase().indexOf(searchComponent.toLowerCase()) !== -1); 
      } else { 
       return (component.name.indexOf(searchComponent) !== -1); 
      } 
     }); 
    } 
    return components; 
}