首页 文章

如何在带有角度2滤波器的表格中对多列应用滤波器

提问于
浏览 次
5

我在我目前的项目中使用角度2 . 我正在尝试在我的表中应用多个过滤器选项 . 您可以参考下面的代码 .

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

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

在组件中：

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

}
angular filter

2 回答

  • 0

    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 !
   }
}
    回复于
  • 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;
}
}
    回复于

相关问题