Angular 向角度为6的管道传递多个值

我需要用pipe在Angular 6中创建一个搜索表单，并且必须将多个参数传递给pipe

nameSearch

，

emailSearch

，

roleSeach

，

accountSearch

 <tr *ngFor="let user of data | searchuser: nameSearch" ></tr>

请指导我如何使用多参数创建管道搜索

编辑：

  transform(users: IUser[], nameSearch: string ,eamilSearch:string,roleSearch:string): IUser[] {
if(!users) return [];
if(!nameSearch) return users;
if(!eamilSearch) return users;
if(!roleSearch) return users;

nameSearch=nameSearch.toLocaleLowerCase();
return users.filter(item=>
  {
      item.desplayName.toLocaleLowerCase().includes(nameSearch),
      item.email.toLocaleLowerCase().includes(eamilSearch),
      item.description.toLocaleLowerCase().includes(roleSearch)          
  });
}

---

它应该与使用逗号分隔传递单个参数的方式相同，如下所示

export class SearchuserPipe implements PipeTransform {  
   transform(users: IUser[], nameSearch:string, emailSearch:string, roleSearch:
   string):IUser[] {
}

在模板中

<tr *ngFor="let user of data | searchuser: nameSearch : emailSearch : roleSearch" ></tr>

---

您可以向必须在管道中实现的

transform

方法添加更多参数

将这些参数设置为可选参数，以便您可以根据自己的方便使用它们

大概是这样的：

import { Pipe, PipeTransform } from '@angular/core';

export interface IUser {
  displayName: string;
  name: string;
  email: string;
  role: string;
  account: string;
  description: string;
}

@Pipe({
  name: 'searchUser'
})
export class SearchUserPipe implements PipeTransform {

  transform(
    users: IUser[],
    nameSearch?: string,
    emailSearch?: string,
    roleSearch?: string,
    accountSearch?: string
  ): IUser[] {

    if (!users) return [];
    if (!nameSearch) return users;
    nameSearch = nameSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.displayName.toLocaleLowerCase() ===  nameSearch)];

    if (!emailSearch) return users;
    emailSearch = emailSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.email.toLocaleLowerCase() ===  emailSearch)];

    if (!roleSearch) return users;
    roleSearch = roleSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.role.toLocaleLowerCase() ===  roleSearch)];

    return users;
  }
}

<input type="text" placeholder="name" [(ngModel)]="nameSearch">
<input type="text" placeholder="email" [(ngModel)]="emailSearch">
<input type="text" placeholder="role" [(ngModel)]="roleSearch">
<input type="text" placeholder="account" [(ngModel)]="accountSearch">

<table>
  <tbody>
    <tr *ngFor="let user of data | searchUser: nameSearch: emailSearch: roleSearch: accountSearch">
      <td>
        {{ user | json }}
      </td>
    </tr>
  </tbody>
</table>

现在，在模板中，您只需使用此

管道

，并传递由颜色分隔的参数（

：

），如下所示：

import { Pipe, PipeTransform } from '@angular/core';

export interface IUser {
  displayName: string;
  name: string;
  email: string;
  role: string;
  account: string;
  description: string;
}

@Pipe({
  name: 'searchUser'
})
export class SearchUserPipe implements PipeTransform {

  transform(
    users: IUser[],
    nameSearch?: string,
    emailSearch?: string,
    roleSearch?: string,
    accountSearch?: string
  ): IUser[] {

    if (!users) return [];
    if (!nameSearch) return users;
    nameSearch = nameSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.displayName.toLocaleLowerCase() ===  nameSearch)];

    if (!emailSearch) return users;
    emailSearch = emailSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.email.toLocaleLowerCase() ===  emailSearch)];

    if (!roleSearch) return users;
    roleSearch = roleSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.role.toLocaleLowerCase() ===  roleSearch)];

    return users;
  }
}

<input type="text" placeholder="name" [(ngModel)]="nameSearch">
<input type="text" placeholder="email" [(ngModel)]="emailSearch">
<input type="text" placeholder="role" [(ngModel)]="roleSearch">
<input type="text" placeholder="account" [(ngModel)]="accountSearch">

<table>
  <tbody>
    <tr *ngFor="let user of data | searchUser: nameSearch: emailSearch: roleSearch: accountSearch">
      <td>
        {{ user | json }}
      </td>
    </tr>
  </tbody>
</table>

---

---

这是一个供您参考的示例。

您检查过了吗：？谢谢，但当我使用此代码时，它无法运行我的pipt:

转换（用户：IUser[]，名称搜索：string，eamilSearch:string，角色搜索：string）：IUser[]{if（！users）return[]；if（！nameSearch）return users；if（！eamilSearch）return users；if（！roleSearch）return users；if（！roleSearch）return users；nameSearch=nameSearch.tolocalLowercase（）；return users.filter（item=>{item.desplayName.tolocalLowercase（）.includes（nameSearch）、item.email.tolocalLowercase（）.includes（eamilSearch）、item.description.tolocalLowercase（）.includes（roleSearch）}）

谢谢，当我使用你的代码时，它不会显示任何内容list@kianoush，您可以添加一些示例数据吗？当我使用一个参数时，它可以工作，当我使用3个字段时，

roleSearch

就是工作。我将代码放在编辑问题中。是的，总体思路是只使用由

：

分隔的参数。但是如果静态参数用引号括起来。对于更新的答案和StackBlitz中的参数，您可以像我一样使用属性。我使用您的代码，但仍然不起作用。只要

rolesearch

就可以了