之前在没学精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)
  ]

定义数组,根据age 来显示结果@H_502_1@

2.显示到页面上:@H_502_1@

<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@

代码如下@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@

第二个参数是Input的内容.@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@

页面只需要返回false或者true来控制是否显示,false为不过滤了 是显示,相反则显示@H_502_1@

之后在页面中应用即可.@H_502_1@

5.在页面中即可@H_502_1@