角度2のフィルタ付きテーブルの複数の列にフィルタを適用する方法

Question

現在のプロジェクトで角度2を使用しています。私はテーブルに複数のフィルターオプションを適用しようとしています。以下のコードを参照することができます。フィルターTempleteで

<table class="table table-condensed table-responsive"> 
    <thead> 
     <tr> 
      <td></td> 
      <td *ngFor="let key of headers">{{key}}</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td *ngFor="let key of headers; let i=index"> 
       <input type='text' id="{{key}}" (keyup)="filterUser(key)" placeholder="Search User By {{key}}"/> 
      </td> 
     </tr> 
    </thead> 
    <tbody *ngFor="let user of alluser | userFilter : columnName : listFilter " #someVar>    
     <tr> 
      <td><input type="checkbox" class="checkbox" value="{{user.Id}}" (change)="getSelectedUser()" [(ngModel)]="user.IsSelected" /></td> 
      <td>{{user.UserName}}</td> 
      <td>{{user.FirstName | uppercase}}</td> 
      <td>{{user.LastName}}</td> 
      <td><button type="button" class="btn btn-primary" (click)="editModal.Open(user)">Edit</button></td> 
      <td><button class="btn btn-primary" (click)='deletemodal.open()'>Delete</button></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

：コンポーネントで

export class UserFilterPipe implements PipeTransform { 
    transform(value: User[], field: string, args: string): User[]{ 
     let filter: string = args ? args.toLocaleLowerCase() : null; 
     return filter ? value.filter((user: User) => 
      user[field].toLocaleLowerCase().indexOf(filter) != -1) : value; 
    } 
} 

：HTMLテンプレートで

filterUser(key) { 
    debugger; 
    this.columnName = key; 
    var v1 = document.getElementById(key).value; 
    this.listFilter = v1; 

} 

Answer 1

Pipeのtransform構文は次のようなものです：

transform(__input__, __arg1__, __arg2__, ... __argn__) 

だからあなたの場合にはPipeは、次のようになります。

export class UserFilterPipe implements PipeTransform { 
    transform(value: User[], columnName: string, listFilter: string): User[]{ 
     if (!value || !values.length) return []; 

     // do your filtering here .. with both input values ! 
    } 
} 

Answer 2

これは助けることができる、すべての列に任意のテーブルをフィルタリングすることができますが：

@Pipe({ 
name: 'tableFilter', 
pure: false 
}) 
export class TableFilterPipe implements PipeTransform { 
keys = []; 
transform(items: any, args: string): any { 

if (items != null && items.length > 0) { 
    let ans = []; 

    if (this.keys.length == 0) { 
    this.keys = Object.keys(items[0]); 
    } 

    for (let i of items) { 
    for (let k of this.keys) { 
     if (i[k].toString().match('^.*' + args +'.*$')) { 
     ans.push(i); 
     break; 
     } 
    } 
    } 
    return ans; 
} 
}