迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

在 Angular 中创建搜索过滤器

作者:迹忆客 最近更新:2023/04/14 浏览次数:

本文将演示如何使用 ng2-search-filter 包和 ngfor 循环指令在 Angular 项目中创建搜索过滤器来过滤收集的数据。


Angular 搜索过滤器

Angular 框架包含许多可以创建各种应用程序的功能。其中一项功能是能够使用管道,这是一种过滤器,可以在数据显示在屏幕上之前应用于数据。

Angular 搜索过滤器提供了一种声明性的方式来过滤进入或离开控制器范围的数据。过滤器可以应用于任何数据对象:字符串、数组、对象,甚至是原语。

过滤器从左到右执行,直到一个返回 true,或者所有过滤器都已执行但没有返回 true。在 Angular 中构建自定义搜索的最佳方法是使用 ng2-search-filter 包,而不是使用任何第三方库。


在 Angular 中创建搜索过滤器的步骤

本节将演示在 Angular 中创建搜索过滤器所需的步骤。

安装 Angular CLI

首先,安装用于开发 Angular 应用程序的 Angular CLI 工具。运行此命令以安装 Angular CLI。

npm install @angular/cli

安装 ng2-search-filter

第二步也是最重要的一步是安装 ng2-search-filter 包。

npm i ng2-search-filter

ng2-search-filter 为 Angular 应用程序提供搜索输入组件。它允许用户通过在输入框中键入来过滤项目列表。

该组件是高度可配置的,并支持许多不同的数据源。

导入模块

第三步是在 App Module 类中导入 FormsModuleNg2SearchPipeModule。因为如果你想为你的网站创建一个搜索表单,你需要导入这两个模块。

在你的 Angular 应用程序中编写以下代码。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
@NgModule({
    imports:      [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

编写 TypeScript 和 HTML 代码

此步骤将决定你的搜索过滤器的外观。我们将编写 TypeScript 和 HTML 代码。

TypeScript 代码:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css']
})
export class AppComponent {
    searchText: any;
    names = [
        { country: 'Adil'},
        { country: 'John'},
        { country: 'Jinku'},
        { country: 'Steve'},
        { country: 'Sam'},
        { country: 'Zeed'},
        { country: 'Abraham'},
        { country: 'Heldon'}
    ];
}

HTML 代码:

 <h1>Example of Angular Search Filter</h1>
<div class="container">
    <div class="search-name">
        <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="on" placeholder=" SEARCH  ">
    </div>
    <ul *ngFor="let name of names | filter:searchText">
        <li>
            <span>{{name.country}}</span>
        </li>
    </ul>
</div>

在这个例子中,我们编写了一些随机名称,并且在 ng2-search-filterng-for 循环的帮助下,我们能够通过搜索过滤数据。


自定义搜索过滤器的优势

我们已经学习了在 Angular 中创建搜索过滤器的所有步骤。让我们看看借助 ng2-search-filter 包创建自定义搜索过滤器的好处。

  1. 使用方便,可根据应用需求定制。
  2. 它是一个 Angular 核心组件,提供了灵活性和准确性。
  3. 搜索过滤器可用于任何数据,而不仅仅是字符串。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便