javascript - 过滤器不是自定义管道 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>