之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能.@H_502_1@
下面就来说说如何实现:@H_502_1@
1.@H_502_1@
export class person{ constructor( public name:string,public age:number ){ } }
persons:Array<any>=[ new person('tom',20),new person('lilei',22),23),24),25),26),21),29) ]
<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就会发射改变后的内容@H_502_1@
3.获得内容之后 在组件中订阅改变后的内容@H_502_1@
private agefilter:FormControl=new FormControl() constructor() { this.agefilter.valueChanges.debounceTime(500).subscribe((value)=>{ this.keyword=value }) }
需要在头部引入@H_502_1@
import { FormControl } from '@angular/forms'; import 'rxjs/Rx';
debounceTime()这个函数可以提高用户的体验.@H_502_1@
另外还需要在app.module中引入ReactiveFormsModule.@H_502_1@
4.接下来写管道了.@H_502_1@
使用ng指令 ng g pipe pipe/searchPipe@H_502_1@
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,@H_502_1@
if(!filterField || ! keyword){
return list
}@H_502_1@
如果两个参数有一个为空的话,返回list.@H_502_1@
return list.filter((item)=>{
// console.log(item)
let val= item[filterField]
console.log(val);
return val >=keyword
});@H_502_1@