オフィス狛 技術部の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の引数を以下のように変更しました。
第1引数:items: any[] → 対象のリスト
第2引数:col: string → フィルタを行う対象の項目名
第3引数: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":"テスト1"},
- {"id":"2","name":"テスト2"},
- {"id":"3","name":"テスト3"},
- {"id":"4","name":"テスト4"},
- {"id":"7","name":"テスト7"}
- ]}
実際に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」になっている値を絞り込んでいます。
出力結果は、
- テスト7
となります。
如何でしょうか。Pipe、色々な使い方がありますね。
それでは、良いAngularライフを!
Angular