在 Angular 中建立搜尋過濾器

Muhammad Adil 2023年1月30日

Angular Angular Search Filter

Angular 搜尋過濾器
在 Angular 中建立搜尋過濾器的步驟
自定義搜尋過濾器的優勢

本文將演示如何使用 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 類中匯入 FormsModule 和 Ng2SearchPipeModule。因為如果你想為你的網站建立一個搜尋表單，你需要匯入這兩個模組。

在你的 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-filter 和 ng-for 迴圈的幫助下，我們能夠通過搜尋過濾資料。

自定義搜尋過濾器的優勢

我們已經學習了在 Angular 中建立搜尋過濾器的所有步驟。讓我們看看藉助 ng2-search-filter 包建立自定義搜尋過濾器的好處。

使用方便，可根據應用需求定製。
它是一個 Angular 核心元件，提供了靈活性和準確性。
搜尋過濾器可用於任何資料，而不僅僅是字串。

點選這裡檢視以上所有步驟的演示。

作者： Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook