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

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

我们今天学到什么

安装过滤器库

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

ng2-search-filter安装

npm i ng2-search-filter-保存

1	npm i ng2-搜索-过滤 -保存

看更多:

通过3种优化方式在Angular中获取大数据
呈现大列表的可用技术概述...

用法

进口 Ng2SearchPipeModule到你的模块

在module.ts中添加Ng2SearchPipeModule

的JavaScript

从'@ angular / core'导入{NgModule};
从“ @ angular / platform-browser”导入{BrowserModule}；
从“ @ angular / forms”导入{FormsModule}；

// 搜索 module
从'ng2-search-filter'导入{Ng2SearchPipeModule};

从“ ./app.component”导入{AppComponent}；

@NgModule({
  导入：[BrowserModule，FormsModule，Ng2SearchPipeModule]，
  声明：[AppComponent]，
  引导程序：[AppComponent]
})
导出类AppModule {}

进口 { Ng模块 } 从 '@角度/核心';

进口 { 浏览器模块 } 从 '@ angular / platform-browser';

进口 { 表格模块 } 从 '@ angular / forms';

//搜索模块

进口 { Ng2SearchPipeModule } 从 'ng2-search-filter';

进口 { AppComponent } 从 './app.component';

@Ng模块({

进口: [ 浏览器模块, 表格模块, Ng2SearchPipeModule ],

声明书: [ AppComponent ],

引导程序: [ AppComponent ]

})

出口类应用模块 { }

将ngModel与您的搜索框一起使用，例如：

<输入class =“ form-control” 类型 =“ text” 名称 =“ 搜索” [（ngModel）] =“ 搜索Text” 自动完成 =“ off”占位符=“&＃61442;开始按ID或标题或URL搜索文章”>

1	<输入类=“形式控制” 类型=“文本” 名称=“搜索” [(ngModel)]=“ 搜索Text” 自动完成=“关闭” 占位符=" 开始按ID或标题或URL搜索文章”>

并在组件中使用管道

使用filter和ngFor获取文章

XHTML

<tr * ngFor =“让文章文章| 过滤：searchText”>
    <td>{{article.id}}</td>
    <td>{{article.title}}</td>
    <td><a href="{{blogUrl}}{{article.url}}">{{article.url}}</a></td>
</tr>

<td>{{article.id}}</td>

<td>{{article.title}}</td>

<td><a href=“ {{blogUrl}} {{article.url}}”>{{article.url}}</a></td>

</tr>

项目演示

任务给你

就像上面的屏幕截图一样，您必须使用过滤器文本添加结果计数。请在评论区域与我们分享您的stackblitz代码。