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.在页面中即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

前端布局单位选择之 rem

进行布局的话建议用less去写,因为less中可以用变量,这样我们可以省去频繁用计算器的时间了。

671
来自专栏jojo的技术小屋

原 each()、map()

作者:汪娇娇 日期:2016.9.1 如果说到某个元素的开关事件,第一反应那就是用一个变量做标记,比如flag,为1时开,为0时关,这是很简单的。下面我将以li...

3308
来自专栏程序员的知识天地

H5学习从0到1-H5的块标签的使用(9)

453
来自专栏达摩兵的技术空间

css选择器攻略

很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

743
来自专栏程序人生 阅读快乐

C语言编程魔法书:基于C11标准

主要讲解C11标准的语法内容,并且从整个编译、连接到加载过程都会涉及。同时在后会分别介绍GCC编译器与Clang编译器的C语言语法扩展。通过阅读本书,读者能够完...

392
来自专栏快乐八哥

jQuery.unique引发一个血案

项目开发过程中,PM说系统只要在一个特定的浏览器中运行就好,但是在其他的浏览器中不能出现逻辑的错误,所以在开发过程中,前端和后台选择是Chrome浏览器,没有仔...

1758
来自专栏吴伟祥

正则表达式在线测试&&生成代码 转

例如,您可能需要搜索整个网站,删除过时的材料,以及替换某些 HTML 格式标记。在这种情况下,可以使用正则表达式来确定在每个文件中是否出现该材料或该 HTML...

684
来自专栏超然的博客

jquery中动态新增的元素节点无法触发事件解决办法

  在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.

652
来自专栏前端小吉米

Promise 串行调用面试题

793
来自专栏前端知识分享

第69天:jQuery入口函数

Js方式 :document.getElementById(“id”).onclick

432

扫码关注云+社区