Comment appliquer un filtre sur plusieurs colonnes d'un tableau avec le filtre angulaire 2 ?

Question

J'utilise Angular 2 dans mon projet actuel. Et j'essaie d'appliquer une option de filtre multiple dans mon tableau. Vous pouvez vous référer au code ci-dessous.

Dans le modèle HTML :

<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>

Dans le filtre Templete :

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;
   }
}

Dans la composante :

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

}

Answer 1

Cela pourrait vous aider, vous pouvez filtrer n'importe quel tableau sur toutes les colonnes :

@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;
}
}

Answer 2

Pipe 's transform La syntaxe est comme ça :

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

Donc, dans votre cas, le Pipe devrait ressembler à ceci :

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 !
   }
}