首页 文章

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

提问于
浏览 次
0

我是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' },
]
}

在控制台中，我收到错误：ERROR TypeError：Employees.filter不是函数 .

javascript arrays angular angular2-template angular2-services

2 回答

  • 0

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

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

    函数区分大小写，因此tolowercase应该写为toLowerCase，并且您要对完整对象应用过滤，因此您必须将其应用于名称，性别等 .

    我在您的代码中进行了一些更改，将其替换为您的管道代码 .

    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)
        console.log(x.Empname.toLowerCase().includes(EmpFind.toLowerCase()));
        return x.Empname.toLowerCase().includes(EmpFind.toLowerCase())
      })
    }    
   }   
}
    回复于

相关问题