[英]angular2 pipe not working
I am trying to have search functionality in angular2. 我正在尝试在angular2中具有搜索功能。
So far i have created my own custom pipe for this like below: 到目前为止,我已经为此创建了自己的自定义管道,如下所示:
search.pipe.ts search.pipe.ts
import { Pipe, PipeTransform ,Injectable} from '@angular/core';
@Pipe({
name: 'search',
pure: false
})
@Injectable()
export class SearchPipe implements PipeTransform {
transform(components: any[], args: any): any {
var val = args[0];
if (val !== undefined) {
var lowerEnabled = args.length > 1 ? args[1] : false;
// filter components array, components which match and return true will be kept, false will be filtered out
return components.filter((component) => {
if (lowerEnabled) {
return (component.name.toLowerCase().indexOf(val.toLowerCase()) !== -1);
} else {
return (component.name.indexOf(val) !== -1);
}
});
}
return components;
}
}
and after doing this I am trying to apply this pipe inside html like this: 在执行此操作后,我尝试在html内应用此管道,如下所示:
*ngFor="let aComponent of selectedLib.componentGroups[groupCounter].components | search:searchComp:true"
its giving me below error: 它给我下面的错误:
TypeError: Cannot read property '0' of undefined
TypeError:无法读取未定义的属性“ 0”
when I am not applying pipe , *ngFor prints the array elements correctly but as soon as I am applying search pipe in html its giving me above error. 当我不应用管道时,* ngFor可以正确打印数组元素,但是一旦我在html中应用搜索管道,它就会给我上述错误。
any inputs? 有输入吗?
The new pipes in RC take several arguments instead of just one array: RC中的新管道采用几个参数,而不是一个数组:
transform(components: any[], searchComponent: any, caseInsensitive: boolean): any {
if (searchComponent !== undefined) {
// filter components array, components which match and return true will be kept, false will be filtered out
return components.filter((component) => {
if (caseInsensitive) {
return (component.name.toLowerCase().indexOf(searchComponent.toLowerCase()) !== -1);
} else {
return (component.name.indexOf(searchComponent) !== -1);
}
});
}
return components;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.