使用Angular中的一个管道过滤表中的多列 [英] Filter on multiple columns in a table using one pipe in Angular

问题描述

大家好.我想为我的表创建一个自定义过滤器，该过滤器吸收多个参数搜索多列..在我的情况下，现在只可以传递一个参数.预先感谢

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

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中创建了多个参数管道

Created multiple arguments pipe in angular 4

该代码使您可以搜索表中的多个列.

The code lets you search through multiple columns in your table.

1. 值:其中涉及表内的所有数据，所有列
2. searchString:要在列内(表内)搜索的内容.

因此，您可以定义要在转换函数内搜索的列.

Hence, you can define which columns to be searched inside the transform function.

在这种情况下，要搜索的列是builderId，groupName和companyPersonName

In this case, the columns to be searched are builderId, groupName and 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 );      
       }) 
    }
}

变换函数有什么作用?

1. builderId，groupName和companyPersonName是我搜索的三个字段

1. builderId, groupName and companyPersonName are the three fields I searched

builderId转换为字符串，因为我们的searchString是字符串格式.

builderId converted to string because our searchString is in string format.

toLowerCase()用于使搜索准确无视用户搜索是小写还是大写

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>

确保将filter.ts文件添加到module.ts文件中

Make sure your filter.ts file added to module.ts file

这篇关于使用Angular中的一个管道过滤表中的多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！