Question

大家好。我想为我的桌子制作一个自定义过滤器，它可以输入多个参数搜索多个列..在我的情况下，现在只能传递一个参数。提前谢谢

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()) );
}

Answer 1

以角度4

创建多个参数管道

该代码可让您搜索表格中的多个列。

在转换函数
中传递了2个参数

value：其中涉及表格内的所有数据，所有列

searchString：您要在列内搜索的内容（在表格内）。

因此，您可以在transform函数中定义要搜索的列。

在这种情况下，要搜索的列是builderId，groupName和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 );      
       }) 
    }
}

转换功能有什么作用？



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



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



toLowerCase（）用于使搜索准确无论用户搜索是小写还是大写

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文件

Answer 2

下面是我已经通过10和2作为管道参数的示例代码，类似地，您可以传递多个参数并通过管道组件中的参数获取它。相对于输入数量，增加管道组件中的参数。 working demo

模板

<p>Super power boost: {{2 | exponentialStrength:10:2}}</p>

管

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent1: any,exponent2: any): number {
    let exp = parseFloat(exponent2);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

使用Angular中的一个管道过滤表中的多个列

2 个答案:

在转换函数

转换功能有什么作用？