Передать несколько значений в трубу в Angular 6 - PullRequest
Новая
       30

Передать несколько значений в трубу в Angular 6

0 голосов
/ 30 ноября 2018

Мне нужно создать форму поиска в Angular 6 с pipe и передать несколько аргументов в 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)
      });
  }

пожалуйста, направьте меня, как создать трубупоиск с несколькими аргументами.

Редактировать: 

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

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Вы можете добавить больше параметров к методу 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;
  }
}

Теперь в вашем шаблоне вы можете просто использовать это pipe и передавать аргументы, разделенные цветом (:), что-то вроде этого: 

<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 для вашей ссылки.

0 голосов
/ 30 ноября 2018

Это должен быть тот же способ, которым вы передаете один параметр с разделением запятой следующим образом, 

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>
...