angular使用管道实现搜索功能
之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能.
下面就来说说如何实现:
1.
export class person{
constructor(
public name:string,
public age:number
){
}
}persons:Array<any>=[
new person('tom',20),
new person('lilei',22),
new person('lilei',23),
new person('lilei',24),
new person('lilei',25),
new person('lilei',26),
new person('lilei',23),
new person('lilei',24),
new person('lilei',25),
new person('lilei',26),
new person('lilei',22),
new person('lilei',21),
new person('lilei',29)
]定义数组,根据age 来显示结果
2.显示到页面上:
<input type="text" [formControl]='agefilter'>
<ul>
<li *ngFor="let person of persons | filter:'age':keyword">
name:{{person.name}} <br>
age:{{person.age}}
</li>
</ul>formControl 是表单中的一个指令, 当input表单内容改变的时候,agefilter就会发射改变后的内容
3.获得内容之后 在组件中订阅改变后的内容
private agefilter:FormControl=new FormControl()
constructor() {
this.agefilter.valueChanges.debounceTime(500).subscribe((value)=>{
this.keyword=value
})
}需要在头部引入
import { FormControl } from '@angular/forms';
import 'rxjs/Rx';debounceTime()这个函数可以提高用户的体验.
另外还需要在app.module中引入ReactiveFormsModule.
4.接下来写管道了.
使用ng指令 ng g pipe pipe/searchPipe
代码如下
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(list: any[], filterField:string,keyword:string): any {
if(!filterField || ! keyword){
return list
}
return list.filter((item)=>{
// console.log(item)
let val= item[filterField]
console.log(val);
return val >=keyword
});
}
}这个过滤需要两个参数,第一个参数:是依据哪个参数来搜索,是age还是name,
第二个参数是Input的内容.
if(!filterField || ! keyword){ return list }
如果两个参数有一个为空的话,返回list.
return list.filter((item)=>{ // console.log(item) let val= item[filterField] console.log(val); return val >=keyword });
页面只需要返回false或者true来控制是否显示,false为不过滤了 是显示,相反则显示
之后在页面中应用即可.
5.在页面中即可
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读