angular使用管道实现搜索功能-白红宇

angular使用管道实现搜索功能

阅读量：5884 次

发布时间：2019-06-19

本文共 1868 字，大约阅读时间需要 6 分钟。

之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能.

下面就来说说如何实现:

export class person{  constructor(    public name:string,    public age:number  ){  }}

persons:Array
    
     =[    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.显示到页面上:


      
         name:{
   {person.name}}  
    age:{
   {person.age}}

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

});