Angular Templateでリストのフィルタを行う。

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

今年最初のブログ、何とか1月中に出来ました。（ギリギリ）
今年最初はAngularネタで行きたいと思います。

AngularのTemplate（html）でリストのデータを表示する際、

<ng-container *ngFor="let item of testList>
  <div class="test_class">{{ item.name }}</div>
</ng-container>

こんな感じの書き方をすると思います。
この時、「リスト内のデータをフィルタしてから表示したいんだよなー」と思う時がありませんか？
ありません？ないかな・・・・まあ、私はあります。

というわけで、こんな時は「Pipe」を使います。
以前、『AngularのPipeを使ってhtml(View)の表示を共通化する。』をブログに書きましたが、あの「Pipe」です。

では、いつものようにAngular CLIで作成します。コマンドは、

ng g pipe [path/name]

です。今回は、「list-filter」という名前で作ります。

$ng g pipe shared/list-filter
CREATE src/app/shared/list-filter.pipe.spec.ts (204 bytes)
CREATE src/app/shared/list-filter.pipe.ts (209 bytes)
UPDATE src/app/shared/shared.module.ts (711 bytes)

すると、以下のようなファイルが生成されます。

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

@Pipe({
  name: 'listFilter'
})
export class ListFilterPipe implements PipeTransform {
  transform(value: string, args?: any): any {
    return null;
  }
}

これを以下のように変更します。

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

@Pipe({
  name: 'filter'
})
export class ListFilterPipe implements PipeTransform {
  transform(items: any[], col: string, value: string): any {
    if (col.length === 0 || value.length === 0) {
      return items;
    }
    return items.filter(x => x[col] === value);
  }
}

Pipeの名前は分かりやすく「filter」にしています。

そして、transformの引数を以下のように変更しました。
第１引数：items: any[] → 対象のリスト
第２引数：col: string → フィルタを行う対象の項目名
第３引数：value: string → フィルタする値

実際は色々作り込むのですが、とりあえず、今回は、
フィルタする項目・値が無かったら、リストをそのまま返すようにして、

if (col.length === 0 || value.length === 0) {
  return items;
}

最後にリストのフィルタした結果を返しています。

return items.filter(x => x[col] === value);

では、実際にこのPipeを使ってみましょう。

リストの中身はこんな感じだとします。（分かりやすくする為に、json形式で書いています。）

{"hoge_list":[
  {"id":"1","name":"テスト１"},
  {"id":"2","name":"テスト２"},
  {"id":"3","name":"テスト３"},
  {"id":"4","name":"テスト４"},
  {"id":"7","name":"テスト７"}
]}

実際にTemplateで使用する場合は以下のように記載します。

<ng-container *ngFor="let item of testList | filter:'id':'7'">
  <div class="test_class">{{ item.name }}</div>
</ng-container>

@Pipe の name をvertical lineでリストの後ろにつけて、Pipeの後ろは、「：(colon)」を繋げてPipeへの引数を記載します。
つまり、「testList | filter:'id':'7'」の部分で、リスト内の「id」という項目が「7」になっている値を絞り込んでいます。

出力結果は、

 テスト７

となります。

如何でしょうか。Pipe、色々な使い方がありますね。

それでは、良いAngularライフを！


Angular