将多个值传递给 Angular 6 中的管道

问题描述

我需要使用 pipe 在 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 供您参考.

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