大佬教程收集整理的这篇文章主要介绍了如何在带有角度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.@L_772_4@'>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; } }
以上是大佬教程为你收集整理的如何在带有角度2滤波器的表格中对多列应用滤波器全部内容，希望文章能够帮你解决如何在带有角度2滤波器的表格中对多列应用滤波器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。