2017-11-22 14 views
0

私は、ユーザー入力でオブジェクトの配列をフィルタリングしようとしています。私は値をフィルタリングするためにプロパティ名を指定する場合に限り、これを完了しました。どのように私はプロパティの値をフィルタリングしますか?複数の列をパイプで1つの入力でフィルタリングする| angular2

パイプ:

@Pipe({ name: 'columns' }) 

export class SearchPipe implements PipeTransform { 
    transform(columns: any, filterText: any): any { 
    if (filterText == null) return columns; 
    return columns.filter(function(column) { 
     return column.name.toLowerCase().indexOf(filterText.toLowerCase()) > -1; 
    }) 
    } 
} 

テンプレート:

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

<tr *ngFor='let office of offices | columns: filterText'> 
    <td><input type="checkbox" checked class="i-checks" name="input[]"></td> 
    <td>{{ office.officeId }}</td> 
    <td>{{ office.name }}</td> 
    <td>{{ office.createdAt | date:'longDate'}}</td> 
    <td>{{ office.noOfPhones }}</td> 
    <td>{{ office.address }}</td> 
    <td>{{ office.region }}</td> 
    <td>{{ office.status }}</td> 
</tr> 

答えて

0

つの値または非常に一致していればあなたの列のすべての値のリストを取得し、trueを返すためにObject.values()を使用する必要があります検索:

export class SearchPipe implements PipeTransform { 
    transform(columns: any, filterText: any): any { 
    if (filterText == null) return columns; 

    // we lowercase here to avoir doing it multiple time 
    filterText = filterText.toLowerCase(); 

    return columns.filter(function(column) { 
     return Object.values(column) 
        .some(value => value.toLowerCase().indexOf(filterText) > -1); 
    }); 
    } 
} 

注意:一部の値が文字列でない場合、エラーがスローされるため、value.toLowerCase();チェックを追加する必要があります。

注意2:Object.valuesが実装されていませんが、Object.keys()がそのようにあなたが

export class SearchPipe implements PipeTransform { 
     transform(columns: any, filterText: any): any { 
     if (filterText == null) return columns; 

     // we lowercase here to avoir doing it multiple time 
     filterText = filterText.toLowerCase(); 

     return columns.filter(function(column) { 
      return Object.keys(column) 
         .some(key => column[key].toLowerCase().indexOf(filterText) > -1); 
     }); 
     } 
    } 

それは

をホープを使用することができIE9

から実施されているので、インターネットエクスプローラでは動作しません

関連する問題