我创建了一个用于过滤表数据的自定义管道。现在,我想添加一个包含表列的下拉列表,在选择特定列时它将能够按该列进行搜索。 感谢您对此部分的任何帮助。
代码如下:
home.component.html
<select id="Select1" [(ngModel)]="selected">
<option>EmpID</option>
<option>EmpName</option>
<option>Age</option>
<option>Address1</option>
<option>Address2</option>
</select>
<input type="text" placeholder="Search" [(ngModel)]="query">
<table *ngIf="employee">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>EmpAge</th>
<th>Address1</th>
<th>Address2</th>
<th>Change Detail</th>
<th>Add Detail</th>
</tr>
<tr *ngFor="let employe of employee | search:query | paginate: { itemsPerPage: 10, currentPage: p }" >
<td>{{employe.EmpID}}</td>
<td>{{employe.EmpName}}</td>
<td>{{employe.Age}}</td>
<td>{{employe.Address1}}</td>
<td>{{employe.Address2}}</td>
<td><button class="btn btn-primary" (click)="open(employe);">Edit</button></td>
<td><button class="btn btn-primary" (click)="add();">Add</button></td>
</tr>
</table>
Search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(!value)return null;
if(!args)return value;
args = args.toLowerCase();
return value.filter(function(item){
return JSON.stringify(item).toLowerCase().includes(args);
});
}
home.component.ts
employee: any [] = [{
"EmpID": "1",
"EmpName": "mukesh12",
"Age": "182",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "2",
"EmpName": "Rakesh",
"Age": "1821",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "3",
"EmpName": "abhishek",
"Age": "184",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "4",
"EmpName": "rawt",
"Age": "186",
"Address1": "ktreptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "5",
"EmpName": "boy",
"Age": "11",
"Address1": "Vtgdreptopelia",
"Address2": "Ttrnneptopelia hghg"
},
{
"EmpID": "6",
"EmpName": "himanshu",
"Age": "28",
"Address1": "MStreptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "7",
"EmpName": "katat",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "8",
"EmpName": "gd",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "9",
"EmpName": "tyss",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "10",
"EmpName": "mukesh",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "11",
"EmpName": "mukesh",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "12",
"EmpName": "lopa",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "13",
"EmpName": "todo",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "14",
"EmpName": "mukesh",
"Age": "16",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "15",
"EmpName": "mukesh",
"Age": "38",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "16",
"EmpName": "mukesh",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "17",
"EmpName": "see",
"Age": "08",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "18",
"EmpName": "hmmm",
"Age": "18",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "19",
"EmpName": "mukesh",
"Age": "28",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
},
{
"EmpID": "20",
"EmpName": "tuta",
"Age": "68",
"Address1": "Streptopelia",
"Address2": "Streptopelia hghg"
}];
如果选择了EmpID,则它将根据在搜索字段中的Empid进行搜索;如果选择了EmpName,则将根据EmpName进行搜索,依此类推........
答案 0 :(得分:0)
在管道中添加另一个参数
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'search' })
export class SearchPipe implements PipeTransform {
transform(value: any, q?: any,colName: any="EmpName"): any {
if(!value) return null;
if(!q) return value;
q = q.toLowerCase();
return value.filter((item)=> {
return item[colName].toLowerCase().includes(q);
});
}
}
home.component.html
<tr *ngFor="let employe of employee | search:query:selected | paginate: { itemsPerPage: 10, currentPage: p }" >