2016-11-19 7 views
0

エラーが発生しましたCannot read property 'bind' of undefined 検索フィールドを名前で除外するカスタムフィルターを作成しましたが、このエラーが発生しています。どんな助けもありがとうございます。 さらにフォローアップの質問。 Angular2の最新の反復では、@Componentの下に[FilterArrayPipe]というフィルタを追加する必要はありませんが、NGModule宣言のapp.module.ts経由で追加しますか?検索フィルターの未定義のプロパティ 'bind'を読み取ることができません

filter.pipe.ts

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

     @Pipe({name: 'filter'}) 
     export class FilterArrayPipe implements PipeTransform{ 

     transform(value, args){ 
    if(!args || !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; 

    } 

    } 


    }) 
    } 

    } 

    } 

users.component.html

<div class="container"> 

    <div class="input-group"> 
     <input type="text" id="search" class="form-control" placeholder="Search Users" [(ngModel)]= "filterText"> 

     </div><!-- /input-group --> 
     <br> 
    <table class="table table-bordered"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Username</th> 
     <th>Email</th> 
     <th>Phone</th> 
     </tr> 
    </thead> 
    <tbody *ngFor="let user of _users | filter: filterText" > 
     <tr> 
     <td>{{user.name}}</td> 
     <td>{{user.username}}</td> 
     <td>{{user.email}}</td> 
      <td>{{user.phone}}</td> 
     </tr> 

    </tbody> 
    </table> 
</div> 

enter image description here

+0

どのラインでエラーが表示されますか? – Puigcerber

+0

これは指定しませんが、パイプです。 filter:それをトリガーしているfilterText。上記のスクリーンショットを参照してください。 – user6680

答えて

0

あなたがタイプミスを持っています。 transformのときにtranformメソッドを実装しています。

PipeTransformをインポートし、TypeScriptコンパイラがexport class FilterArrayPipe implements PipeTransform {のようなクラスを宣言し、間違った方法について警告するのに役立ちます。

+0

ニースキャッチと私はあなたのアドバイスを取ってPipeTransformを実装しましたが、今は新しいエラーが発生しています。エラー:未定義のプロパティ '0'を読み取ることができません TypeError:未定義のプロパティ '0'を読み取ることができません。あなたの提案とスクリーンショットにも基づいて上記のコードを更新しました – user6680

+0

配列の最初の要素が存在するかどうかそれ自体が存在するので、if条件を 'if(!args ||!args [0]){'に変更してください。 – Puigcerber

関連する問題