[英]Filter is not a function in custom pipe angular 2
I'm beginner to Angular 2. I was trying to create the custom pipe for search operation in angular 2. While trying to filter the objects of data by using the filter function I was getting as like my data is not supporting the filter function. 我是Angular 2的初学者。我试图为angular 2中的搜索操作创建自定义管道,同时尝试通过使用过滤器功能过滤数据对象,就像我的数据不支持过滤器功能一样。
My Pipe code : 我的管道代码:
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())
})
}
}
}
My template html file : 我的模板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>
My Component Code : 我的组件代码:
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' },
]
}
In the console I'm getting the error as : ERROR TypeError: Employees.filter is not a function. 在控制台中,我得到的错误为:错误TypeError:Employees.filter不是函数。
The problem is that you are applying the pipe to the x.Empname, however the pipe itself should accept an array. 问题是您将管道应用到x.Empname,但是管道本身应该接受一个数组。 Move your pipe to the ngFor: 将管道移至ngFor:
<tr *ngFor='let x of Employees | GenderSetter : EmpFind'>
<td>{{x.Empname}}</td>
<td>{{x.gender}}</td>
<td>{{x.salary}}</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.