0
如何在一分钟内实现角度搜索过滤器?
搜索过滤器是任何应用程序都需要的组件。在您当前的项目中实施可能很繁琐。在本文中,我们’我们将使用ng2-search-filter来实现角度搜索过滤器管道。
我们今天学到什么

安装过滤器库
在Angular控制台中运行以下代码:
ng2-search-filter安装
1 |
npm i ng2-搜索-过滤 -保存 |
用法
进口 Ng2SearchPipeModule
到你的模块
在module.ts中添加Ng2SearchPipeModule
的JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
进口 { Ng模块 } 从 '@角度/核心'; 进口 { 浏览器模块 } 从 '@ angular / platform-browser'; 进口 { 表格模块 } 从 '@ angular / forms'; //搜索模块 进口 { Ng2SearchPipeModule } 从 'ng2-search-filter'; 进口 { AppComponent } 从 './app.component'; @Ng模块({ 进口: [ 浏览器模块, 表格模块, Ng2SearchPipeModule ], 声明书: [ AppComponent ], 引导程序: [ AppComponent ] }) 出口 类 应用模块 { } |
将ngModel与您的搜索框一起使用,例如:
1 |
<输入 类=“形式控制” 类型=“文本” 名称=“搜索” [(ngModel)]=“ 搜索Text” 自动完成=“关闭” 占位符=" 开始按ID或标题或URL搜索文章”> |
并在组件中使用管道
使用filter和ngFor获取文章
XHTML
1 2 3 4 5 |
<tr *ngFor=“让文章成为文章| 过滤:searchText”> <td>{{article.id}}</td> <td>{{article.title}}</td> <td><a href=“ {{blogUrl}} {{article.url}}”>{{article.url}}</a></td> </tr> |
项目演示
任务给你

就像上面的屏幕截图一样,您必须使用过滤器文本添加结果计数。请在评论区域与我们分享您的stackblitz代码。
注意:您敢接受香槟吗?
0
概要

文章名
如何在一分钟内实现角度搜索过滤器?
描述
搜索过滤器是任何应用程序都需要的组件。在本文中,我们'我们将使用ng2-search-filter来实现角度搜索过滤器管道。
作者
达斯
发布者名称
达斯
出版商徽标
