Angular Filter实现页面搜索
前言
本文代码基于angular v6.x 以上。
我们在开发过程中经常会遇到在页面上实现全局搜索的需求,例如:表格搜索,通过关键词检索整个表格,过滤出我们需要的数据。在Angular6 中我们可以通过Filter + Pipe 的方式来实现这个功能。下面我们看一下实现代码。
经人提醒,代码排版太乱。后续考虑将一个完整版的demo放到GitHub上,敬请期待。
目前可参考我语雀上的文档,Value-语雀。
实现代码
第一步
新建一个名为 filter.pipe.ts 的文件,这部分是实现的核心代码:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'globalFilter'})export class GlobalFilterPipe implements PipeTransform { transform(items: any, filter: any, defaultFilter: boolean): any { if (!filter){ return items; }if (!Array.isArray(items)){ return items; }if (filter && Array.isArray(items)) { let filterKeys = Object.keys(filter);if (defaultFilter) { return items.filter(item => filterKeys.reduce((x, keyName) => (x && new RegExp(filter[keyName], 'gmi').test(item[keyName])) || filter[keyName] == "", true)); } else { return items.filter(item => { return filterKeys.some((keyName) => { return new RegExp(filter[keyName], 'gmi').test(item[keyName]) || filter[keyName] == ""; }); }); } } }}复制代码
代码部分的正则表达式可以根据需要替换,这里是全局匹配。
第二步
在app.module.ts 文件中导入。
import { GlobalFilterPipe } from './shared/filter.pipe';import { BrandComponent } from './brand/components/brand.component'
registerLocaleData(zh);@NgModule({ declarations: [ CategoryComponent, LayoutComponent, DashbordComponent, LeftNavComponent, GlobalFilterPipe, BrandComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, NgZorroAntdModule, AppRoutingModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [LayoutComponent]})export class AppModule { }
复制代码
第三步
在需要的html 文件中应用,在 componet 中定义一个搜索框的变量。
import { Component, OnInit } from '@angular/core';import { CategoryService } from '../category.service';
@Component({ selector: 'app-category', templateUrl: '../pages/category.component.html', styleUrls: ['../pages/category.component.css']})export class CategoryComponent implements OnInit { //todo 搜索无法由下至上匹配1,2级数据 public searchText:string;topCategoriesData=[]; thirdCategoriesData=[];isLoading = false;constructor(private categoryService:CategoryService) { } loadMore(id): void { this.isLoading = true; this.categoryService.getThirdById(id).subscribe((data:any) => { this.isLoading = false; this.thirdCategoriesData=data; }); }ngOnInit():void { this.categoryService.getCategoriesTop().subscribe( (data:any)=>{ this.topCategoriesData = data; }); }
}复制代码
<nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixButton"> <input type="text" [(ngModel)]="searchText" nz-input placeholder="input search text"></nz-input-group><ng-template #suffixButton> <button nz-button nzType="primary" nzSize="large" nzSearch>Search</button></ng-template><br><br><nz-card *ngFor="let topData of topCategoriesData" nzTitle="{{topData.categoryName}}"> <div nz-card-grid [ngStyle]="gridStyle" *ngFor="let secondData of topData.subCategories | globalFilter: {categoryName: searchText,categoryCode: searchText}" > <nz-collapse> <nz-collapse-panel [nzHeader]="secondData.categoryName+'('+secondData.categoryCode+')'" [nzActive]="false" [nzDisabled]="false"> <nz-select style="width: 100%;" (nzOpenChange)="loadMore(secondData.categoryId)" nzPlaceHolder="请选择..." nzAllowClear> <nz-option *ngFor="let thirdData of thirdCategoriesData | globalFilter: {categoryName: searchText,categoryCode: searchText}" [nzValue]="thirdData.categoryId" [nzLabel]="thirdData.categoryName+'('+thirdData.categoryCode+')'"></nz-option> <nz-option *ngIf="isLoading" nzDisabled nzCustomContent> <i nz-icon type="loading" class="loading-icon"></i> Loading Data... </nz-option> </nz-select> </nz-collapse-panel> </nz-collapse> <!-- <a>{{secondData.categoryName}}</a><b>({{secondData.categoryCode}})</b> --> </div> <ng-template #extraTemplate> <a>二级分类数量:{{data.subCategories.length}}</a> </ng-template></nz-card>复制代码
关键代码是:globalFilter: {categoryName: searchText,categoryCode: searchText}
其他代码都是为了完整而贴上去的。
结语
具体的实现思路是利用 filter + pipe 在数据集中进行过滤,因为这里直接过滤的是数据集。所以没办法单独设置过滤html,然后我遇到的问题是如果在一个包含有2级数据结构的html中应用的话,会从1级开始匹配,匹配到2级再结束。但如果1级未匹配到则2级不再匹配。例如:你的1级数据为:“医药品”,2级数据为“医药部外品”,“外用药品”。搜索词为:医药部,则不会显示任何结果。
最后附上本文的 参考链接,感谢阅读。本文如有不对的地方,还请指正。
后续考虑将angular6 中一些实际应用整理成系列文章,欢迎大家一起探讨。
Angular Filter实现页面搜索相关推荐
- 白话Elasticsearch03- 结构化搜索之基于bool组合多个filter条件来搜索数据
文章目录 概述 数据 小示例 搜索发帖日期为2017-01-01,或者帖子ID为XHDK-A-1293-#fJ3的帖子,同时要求帖子的发帖日期绝对不为2017-01-02 搜索帖子ID为XHDK-A- ...
- 微信小程序页面搜索框查询(无后台接口情况下)
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
- eclipse全局搜索_Eclipse如何进行全局搜索和单页面搜索?
在工作中经常会遇到这种问题,想要全局搜索一个代码,无奈文件太多,总不能一个一个页面搜索吧,太心累,为此,本文介绍了一种方法,eclipse全局搜索,还能少浪费一些时间,快来看看吧. 1.打开eclip ...
- angular跳转指定页面_通过 angular CDK 实现页面元素拖放
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动.在特定区域内拖动亦或对列表进行拖放排序等等. 通过 angular CDK 实现 ...
- html条件查询的页面,如何在 url 中记录页面搜索条件
问题描述 在一个页面,有很多搜索选项,比如十几个.假设全部都有选中,那么查询参数就会有十几个.我想把这些参数都放到 url 上,这样即使页面刷新也能还原之前的搜索条件. 我用的是 angular(1. ...
- Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个 我特么裤子都脱了,你给我来这个提示是几个意思 仔细一看 The Component ' ...
- AngularJS实现产品列表(页面搜索,排序)
标签属性介绍 ng-class="{className:expression}" 如果expression为true,则使用className这个class. ng-click=& ...
- 工作中搜索页面搜索记录功能的封装(存储到本地)
//!*封装添加搜索记录功能 (newRecord:str,当参数为空时为获取历史记录; num:记录数,默认为12条;) function addHisRecord(newRecord, num){ ...
- Asp.net MVC Filter监控页面性能和运行时间
本篇文章作用说明: Asp.net MVC Filter监控View实例,监控每个View页面加载的时间,跟踪分析每个页面的加载性能,然后做进一步优化: 问题背景 最近,客户一直反馈系统使用慢,有时候 ...
最新文章
- (原)ubuntu中使用conda安装tensorflow-gpu
- 用Paint Tool SAI绘制漫画
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
- 做csdn图片水印中最亮的崽
- Linux禁止ping以及开启ping的方法
- 完整的python项目实例-Python实例练手项目汇总(附源码)
- Spark源码阅读环境搭建
- 红火七月——安全专家齐聚共讨漏洞分析
- 20170831_安装软件
- 全国大学FTP列表!绝对经典!!!
- cf登录服务器未响应,大神详解win7系统玩cf未响应的图文方法
- 补天漏洞平台为什么能吸引众多白帽和企业?
- 计算机错误代码0X000000be,电脑蓝屏0x000000be怎么解决
- VS2012使用svn
- 计算机病毒的感染机制
- Tair 对 Redis 引擎架构之争的看法
- latex tips latex 大括号 \left\{ \right\}
- 2019网易校园招聘 - 算法平台开发工程师
- 虽然是假的,但是我还是很高兴
- java服务和net服务_艾伟_转载:Java和.NET互操作:我们应该放弃Web Service吗?