时间戳

首页 > 解决方案 > Angular 4过滤器搜索选定列的自定义管道

angular - Angular 4过滤器搜索选定列的自定义管道

问题描述

我创建了一个用于过滤表数据的自定义管道。现在我想添加一个包含表列的下拉列表，在选择特定列时，它将能够按该列进行搜索。对此部分的任何帮助表示赞赏。

代码如下：

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>

搜索.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 进行搜索，以此类推......

标签： angularangular-pipe

解决方案

在管道中添加另一个参数

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 }" >

推荐阅读