Hi everyone.
I want to make a custom filter for my table which intakes more than one argument
to search multiple columns .. in my case right now only one argument can be passed .
thanks in advance
component.html
<tr *ngFor = "let builder of builderDetailsArray[0] | filter :'groupName': searchString; let i = index" >
<td style="text-align: center;"><mat-checkbox></mat-checkbox></td>
<td>{{builder.builderId}}</td>
<td>{{builder.viewDateAdded}}</td>
<td>{{builder.viewLastEdit}}</td>
<td>{{builder.groupName}}</td>
<td>{{builder.companyPersonName}}</td>
<td style="text-align: center;"><button mat-button color="primary">UPDATE</button></td>
</tr>
pipe.ts
@Pipe({
name: "filter",
pure:false
})
export class FilterPipe implements PipeTransform {
transform(items: any[], field: string, value: string): any[] {
if (!items) {
return [];
}
if (!field || !value) {
return items;
}
return items.filter(singleItem =>
singleItem[field].toLowerCase().includes(value.toLowerCase()) );
}
解决方法:
以角度4创建多个参数管道
The code lets you search through multiple columns in your table.
Passed 2 arguments in the transform function
- value: Which involves all the data inside the table, all columns
- searchString: What you want to search inside the columns (inside the table).
因此,您可以定义要在transform函数中搜索的列.
在这种情况下,要搜索的列是builderId,groupName和companyPersonName
管道文件
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: "arrayFilter"
})
export class BuilderFilterPipe implements PipeTransform {
transform(value:any[],searchString:string ){
if(!searchString){
console.log('no search')
return value
}
return value.filter(it=>{
const builderId = it.builderId.toString().includes(searchString)
const groupName = it.groupName.toLowerCase().includes(searchString.toLowerCase())
const companyPersonName = it.companyPersonName.toLowerCase().includes(searchString.toLowerCase())
console.log( builderId + groupName + companyPersonName);
return (builderId + groupName + companyPersonName );
})
}
}
What does the transform function do?
builderId, groupName and companyPersonName are the three fields I searched
builderId converted to string because our searchString is in string format.
toLowerCase() is used to make search accurate irrespective of user search in lowercase or uppercase
HTML:
<tr *ngFor = "let builder of newBuilderDetailsArray | arrayFilter:search" >
<td>{{builder.builderId}}</td>
<td>{{builder.groupName}}</td>
<td>{{builder.companyPersonName}}</td>
</tr>
Make sure your filter.ts file added to module.ts file
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。