Angular TypeScriptで*ngForにフィルターを適用する

2024-04-02

AngularとTypeScriptにおける *ngFor にフィルターを適用する方法

フィルターパイプの使用

*ngFor ディレクティブにパイプを追加することで、フィルターを適用することができます。パイプは、データの変換やフィルタリングを行う関数です。

例：

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

上記の例では、items 配列内の active なアイテムのみを表示するために、filter パイプを使用しています。filter パイプは、最初の引数としてフィルター条件を受け取ります。

カスタムパイプの作成

独自のフィルターを作成することもできます。パイプを作成するには、Pipe デコレータとパイプクラスが必要です。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'activeFilter'
})
export class ActiveFilterPipe implements PipeTransform {

  transform(items: any[], active: boolean): any[] {
    return items.filter(item => item.active === active);
  }
}

上記の例では、activeFilter という名前のパイプを作成しています。このパイプは、items 配列から active プロパティが指定された値と一致するアイテムのみを返します。

テンプレートでパイプを使用するには、パイプの名前と引数をコロンで区切って指定します。

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

上記の例では、activeFilter パイプを使用して、active プロパティが true のアイテムのみを表示しています。

その他のフィルターパイプ

Angular には、さまざまなフィルターパイプが用意されています。

currency - 通貨形式に変換
date - 日付形式に変換
decimal - 小数点以下の桁数を指定
json - JSON形式に変換
lowercase - 小文字に変換
number - 数値に変換

これらのパイプの詳細については、Angular のドキュメントを参照してください。

*ngFor ディレクティブとパイプを使用して、Angular テンプレートでデータをフィルタリングすることができます。

組み込みパイプの使用

<ul>
  <li *ngFor="let item of items | currency:'EUR'">
    {{ item.name }} - {{ item.price | currency:'EUR' }}
  </li>
</ul>

カスタムパイプの使用

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'activeFilter'
})
export class ActiveFilterPipe implements PipeTransform {

  transform(items: any[], active: boolean): any[] {
    return items.filter(item => item.active === active);
  }
}

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

複数のパイプの組み合わせ

<ul>
  <li *ngFor="let item of items | filter:'active' | currency:'EUR'">
    {{ item.name }} - {{ item.price | currency:'EUR' }}
  </li>
</ul>

上記の例では、active なアイテムのみを抽出し、その価格をユーロに変換して表示しています。

補足

上記のサンプルコードは、Angular のバージョンによって異なる場合があります。

*ngFor にフィルターを適用する他の方法

ngIf ディレクティブの使用

<ul>
  <li *ngFor="let item of items">
    <ng-if="item.active">
      {{ item.name }}
    </ng-if>
  </li>
</ul>

上記の例では、active なアイテムのみを表示するために、ngIf ディレクティブを使用しています。

テンプレート関数

<ul>
  <li *ngFor="let item of items">
    {{ getActiveItems(item) }}
  </li>
</ul>

getActiveItems(item: any) {
  if (item.active) {
    return item.name;
  }
}

上記の例では、getActiveItems というテンプレート関数を使用して、active なアイテムのみを取得しています。

コンポーネントの分離

<my-filter [items]="items"></my-filter>

@Component({
  selector: 'my-filter',
  templateUrl: './filter.component.html'
})
export class FilterComponent {
  @Input() items: any[];

  get filteredItems(): any[] {
    return this.items.filter(item => item.active);
  }
}