过滤器不是自定义管道中的函数 angular 2

Question

我是 Angular 2 的初学者。我试图在 angular 2 中为搜索操作创建自定义管道。在尝试使用过滤功能过滤数据对象时，我发现我的数据不支持过滤功能。

我的管道代码：

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

@Pipe({
  name : 'GenderSetter'
})
export class SettingGenderPipe implements PipeTransform
{
   transform(Employees:any,EmpFind:any):any{

    if(EmpFind === undefined) return Employees;
    else {
      return Employees.filter(function(x){
        console.log(x.toLowerCase().includes(EmpFind.toLowerCase()));
        return x.toLowerCase().includes(EmpFind.toLowerCase())
      })
    }    
   }   
}

我的模板 html 文件：

<div style="text-align:center">
  <input type="text" id='txtsearch' [(ngModel)]="EmpFind"/>
  <table>    
    <thead>
      <td>Name</td>
      <td>Gender</td>
     <td>Salary</td>
   </thead>
    <tbody>
      <tr *ngFor='let x of Employees'>
            <td>{{x.Empname | GenderSetter : EmpFind}}</td>
            <td>{{x.gender}}</td>
            <td>{{x.salary}}</td>
      </tr>
    </tbody>
  </table>
</div>

我的组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
Employees=[
  {Empname : 'Roshan',gender:1,salary:'70k' },
  {Empname : 'Ishita',gender:0,salary:'60k' },
  {Empname : 'Ritika',gender:0,salary:'50k' },
  {Empname : 'Girish',gender:1,salary:'40k' },
]
}

在控制台中，我收到如下错误：错误类型错误：Employees.filter 不是函数。

Answer 1

问题是您正在将管道应用到 x.Empname，但是管道本身应该接受一个数组。将你的管道移动到 ngFor:

  <tr *ngFor='let x of Employees | GenderSetter : EmpFind'>
        <td>{{x.Empname}}</td>
        <td>{{x.gender}}</td>
        <td>{{x.salary}}</td>
  </tr>

过滤器不是自定义管道中的函数 angular 2

Filter is not a function in custom pipe angular 2

javascript

arrays

angular

angular2-template

angular2-services