跳到内容
达斯

在一分钟内实现角度搜索过滤器

0

如何在一分钟内实现角度搜索过滤器?

搜索过滤器是任何应用程序都需要的组件。在您当前的项目中实施可能很繁琐。在本文中,我们’我们将使用ng2-search-filter来实现角度搜索过滤器管道。

我们今天学到什么

角度搜索过滤器管道
角度搜索过滤器管道

安装过滤器库

在Angular控制台中运行以下代码:

ng2-search-filter安装
1
npm i ng2-搜索-过滤 -保存


看更多:
角度搜索过滤器,一分钟即可实现角度搜索过滤器
通过3种优化方式在Angular中获取大数据
呈现大列表的可用技术概述...

用法

进口 Ng2SearchPipeModule到你的模块

在module.ts中添加Ng2SearchPipeModule
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
进口 { Ng模块 } '@角度/核心';
进口 { 浏览器模块 } '@ angular / platform-b​​rowser';
进口 { 表格模块 } '@ angular / forms';
 
//搜索模块
进口 { Ng2SearchPipeModule } 'ng2-search-filter';
 
进口 { AppComponent } './app.component';
 
@Ng模块({
  进口:      [ 浏览器模块, 表格模块, Ng2SearchPipeModule ],
  声明书: [ AppComponent ],
  引导程序:    [ AppComponent ]
})
出口 应用模块 { }

将ngModel与您的搜索框一起使用,例如:

1
<输入 =“形式控制” 类型=“文本” 名称=“搜索” [(ngModel)]=“ 搜索Text” 自动完成=“关闭” 占位符="&#61442;  开始按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来实现角度搜索过滤器管道。
作者
发布者名称
达斯
出版商徽标
达斯