Angular 2:输入文本更改时的文本过滤器
Angular 2: text filter on input text change
Angular2,在我的 component.ts
中,我抓取了一个视频对象列表并存储在 _videos:Video[]
在我的 html 中,我显示视频,
<tr *ngFor="#video of _videos">
现在我想在 html 中创建一个搜索输入字段来过滤视频。我正在尝试使用管道:
import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
name: 'textfilter'
})
export class TextFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
if(args[1].toString().length === 0)
return items;
return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
}
}
在 ts
、
private _videoTitleFilter: string ='';
在 html
、
<tr>
<th><input id="videoTitleFilter" placeholder="Filter">{{_videoTitleFilter}}</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr *ngFor="#video of _videos |textfilter:'title':_videoTitleFilter">
绑定似乎无效。管道第一次工作。在这里使用管道是否正确?或者我应该创建一个新数组 _videoList: Video[]
,用 throttle 监听 keyup 事件来改变 _videoList
并在 *ngFor
中使用它而不是 _videos
?
你可以让你的烟斗不纯净:
@Pipe({
name: 'textfilter',
pure: false
})
export class TextFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
if(args[1].toString().length === 0)
return items;
return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
}
}
这个问题可以帮助到你:
Angular2,在我的 component.ts
中,我抓取了一个视频对象列表并存储在 _videos:Video[]
在我的 html 中,我显示视频,
<tr *ngFor="#video of _videos">
现在我想在 html 中创建一个搜索输入字段来过滤视频。我正在尝试使用管道:
import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
name: 'textfilter'
})
export class TextFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
if(args[1].toString().length === 0)
return items;
return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
}
}
在 ts
、
private _videoTitleFilter: string ='';
在 html
、
<tr>
<th><input id="videoTitleFilter" placeholder="Filter">{{_videoTitleFilter}}</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr *ngFor="#video of _videos |textfilter:'title':_videoTitleFilter">
绑定似乎无效。管道第一次工作。在这里使用管道是否正确?或者我应该创建一个新数组 _videoList: Video[]
,用 throttle 监听 keyup 事件来改变 _videoList
并在 *ngFor
中使用它而不是 _videos
?
你可以让你的烟斗不纯净:
@Pipe({
name: 'textfilter',
pure: false
})
export class TextFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
if(args[1].toString().length === 0)
return items;
return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
}
}
这个问题可以帮助到你: