将多个值传递给Angular 6中的管道 [英] Pass multiple values to pipe in Angular 6

问题描述

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

I need to create a search form in Angular 6 with pipe and must pass multiple arguments to pipe .

nameSearch，emailSearch，roleSeach，accountSearch

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

这是我的管道:

@Pipe({
  name: 'searchuser'
})
export class SearchuserPipe implements PipeTransform {

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

    nameSearch=nameSearch.toLocaleLowerCase();
    return users.filter(item=>
      {
         return item.desplayName.toLocaleLowerCase().includes(nameSearch)
      });
  }

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

please guide me how create pipe search with multi argument .

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

推荐答案

您可以向必须在管道中实现的transform方法中添加更多参数.

You can add more parameters to the transform method that you'll have to implement in the pipe.

将这些参数设为可选，以便您可以方便地使用它们.

Make these parameters as optional so that you could use them as per your convenience.

类似这样的东西:

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

现在，在模板中，您可以简单地使用pipe并传递由颜色(:)分隔的参数，如下所示:

Now in your template, you can simply use this pipe and pass arguments separated by a color(:), something like this:

<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 { Component } from '@angular/core';

@Component({...})
export class AppComponent  {

  nameSearch = '';
  emailSearch = '';
  roleSearch = '';
  accountSearch = '';

  data = [...];
}

---

这是 >工作样本StackBlitz 供您参考.

---

Here's a Working Sample StackBlitz for your ref.

这篇关于将多个值传递给Angular 6中的管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！