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

发布时间：2020-12-17 07:15:25 所属栏目：安全来源：网络整理

导读：我在我目前的项目中使用角度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="le

我在我目前的项目中使用角度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;

}

解决方法

这可能会有所帮助,可以筛选所有列上的任何表：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!