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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

linux(八)linux系统中查找文件二

前面介绍的是find命令,我们发现一个find命令居然有那么多的命令,我看到都要晕了,不管没有关系,加油。相信自己! 一、grep命令   1.1、作用   ...

1987
来自专栏深度学习之tensorflow实战篇

python文件打开方式详解——a、a+、r+、w+区别

第一步 排除文件打开方式错误: r只读,r+读写,不创建 w新建只写,w+新建读写,二者都会将文件内容清零 (以w方式打开,不能读出。w+可读写) **w+与r...

5457
来自专栏大内老A

ASP.NET Core管道深度剖析(4):管道是如何建立起来的?

在《管道是如何处理HTTP请求的?》中,我们对ASP.NET Core的请求处理管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管...

1926
来自专栏北京马哥教育

Linux Shell 通配符、元字符、转义符最全使用攻略

来自:程默 - 博客园,作者:程默 www.cnblogs.com/chengmo/archive/2010/10/17/1853344.html 说到she...

7936
来自专栏菩提树下的杨过

maven: 打包可运行的jar包(java application)及依赖项处理

IDE环境中,可以直接用exec-maven-plugin插件来运行java application,类似下面这样: 1 <plugin> 2 <g...

2279
来自专栏技术墨客

Nginx域名访问处理过程 原

在实际应用中,我们可以将多个域名指向一个IP 地址,或者使用范IP解析功能。当多个域名执行一个 IP 地址时,Nginx 可以根据域名来分配不同的虚拟服务器,如...

2433
来自专栏LIN_ZONE

php 执行 命令行命令

PHP提供共了3个专门的执行外部命令的函数:system(),exec(),passthru()。参考:http://www.jb51.net/article/...

1152
来自专栏博岩Java大讲堂

Java虚拟机--类加载器如何加载一个Class文件

1815
来自专栏Python小屋

Python使用模块中对象的几种方法

Python默认安装仅包含部分基本或核心模块,启动时也仅加载了基本模块,在需要时再显式地加载(有些模块可能需要先安装)其他模块,这样可以减小程序运行的压力,且具...

3726
来自专栏运维技术迷

Python:获取目录下指定后缀的文件

os.walk()和os.listdir()两种方法,获取指定文件夹下的文件名. 获取当前目录下指定后缀的文件 #!/usr/bin/env python #c...

6149

扫码关注云+社区

领取腾讯云代金券