我已经创建了一个过滤表自定义管data.Now我想补充一点,包含表列下拉列表中,选择上特定列它将能够通过该栏进行搜索。在这个部分的任何帮助表示赞赏。
代码如下:
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等搜索........
添加其他参数您管
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 }" >