Angular 2 でスマートな検索機能を実装：パイプとカスタムコンポーネント徹底解説

Angular 2 でフィルタ/検索リストを作成する

パイプを使用する

パイプは、データを操作するための強力なツールです。filter パイプを使用して、リストをフィルタリングできます。

<ul>
  <li *ngFor="let item of items | filter:searchText">
    {{ item.name }}
  </li>
</ul>

この例では、searchText という変数にバインドされた検索文字列に基づいてアイテムをフィルタリングしています。

カスタムコンポーネントを使用する

より複雑なフィルタリングロジックが必要な場合は、カスタムコンポーネントを作成できます。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-filter-list',
  template: `
    <ul>
      <li *ngFor="let item of items | filter:filter">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class FilterListComponent {
  @Input() items: any[];
  @Input() filter: (item: any) => boolean;
}

どちらの方法を選択する場合も、次の点に注意する必要があります。

• フィルタリングするデータは、Array 形式である必要があります。
• 検索文字列は、string 形式である必要があります。
• フィルタ関数は、boolean 値を返す必要があります。

これらの要件を満たせば、Angular 2 で簡単にフィルタ/検索リストを作成できます。

Angular 2 でフィルタ/検索リストを作成する - サンプルコード

HTML

<input type="text" [(ngModel)]="searchText">
<ul>
  <li *ngFor="let item of items | filter:searchText">
    {{ item.name }}
  </li>
</ul>

TypeScript

export class AppComponent {
  items = [
    { name: 'Apple' },
    { name: 'Banana' },
    { name: 'Orange' },
  ];
  searchText = '';
}

このコードは次のとおりです。

1. input 要素を使用して、検索文字列を入力できるようにします。
2. ngModel ディレクティブを使用して、searchText 変数に検索文字列をバインドします。
3. ul 要素を使用して、アイテムのリストを作成します。
4. *ngFor ディレクティブを使用して、items 配列を反復します。
5. filter パイプを使用して、items 配列をフィルタリングします。
6. filter パイプは、searchText 変数に格納されている検索文字列と一致するアイテムのみを返します。
7. {{ item.name }} インターポレーションを使用して、各アイテムの名前を表示します。

Angular 2 でフィルタ/検索リストを作成する - その他の方法

<app-filter-list [items]="items" [filter]="filter"></app-filter-list>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-filter-list',
  template: `
    <ul>
      <li *ngFor="let item of filteredItems">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class FilterListComponent {
  @Input() items: any[];
  @Input() filter: (item: any) => boolean;

  get filteredItems() {
    return this.items.filter(this.filter);
  }
}

この例では、app-filter-list というカスタムコンポーネントを作成しています。このコンポーネントは、items と filter という 2 つのプロパティを受け取ります。

• items プロパティは、フィルタリングするデータを表す配列です。
• filter プロパティは、フィルタリングロジックを実装する関数です。

filteredItems ゲッターは、filter 関数を使用して items 配列をフィルタリングし、その結果を返します。

ng2-search-filter ディレクティブは、Angular 2 でフィルタ/検索リストを作成するための便利なツールです。

<ul ng2SearchFilter [term]="searchText" [data]="items">
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

この例では、ng2-search-filter ディレクティブを使用して、リストをフィルタリングしています。このディレクティブは、term と data という 2 つのプロパティを受け取ります。

• term プロパティは、検索文字列を表す文字列です。

このディレクティブは、検索文字列と一致するアイテムのみを返します。