Question

我是Angular 2的初学者。我试图在角度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>

过滤器不是自定义管道角度2中的功能

1 个答案: