[英]Angular 4 Filter Search Custom Pipe for selected columns
我創建了一個用於過濾表數據的自定義管道。現在我想添加一個包含表列的下拉列表,在選擇特定列時將能夠按該列進行搜索。 在這方面的任何幫助表示贊賞。
代碼如下:
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 }" >
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.