Ignite UI for Angular の Grid で Pipe を使用してデータをフォーマットする - インフラジスティックス・ジャパン株式会社Blog

ユーザーにデータをどのように見せるかは重要です。多くの場合、データソースからのデータをそのままビューアーに提示することはできません。ユーザーには、より実体感のあるデータの表現が必要です。

この記事の原文は以下よりご確認いただけます。
Dhananjay Kumar / Thursday, June 13, 2019
Formatting Data using Pipes in the Ignite UI for Angular Grid

以下のようなデータソースを考えてみましょう。

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

まず、テンプレートに igxGrid のインスタンスを定義し、data プロパティを product 配列にデータバインディングしましょう。Ignite UI for Angular の Grid を追加するのは簡単です。以下のコードのようになります。

<igx-grid [data]="products"
          [autoGenerate]="true"
          width="960px">
</igx-grid>

ここでは、autoGenerate プロパティを true に設定しています。これにより、Ignite UI は読み込んだデータソースからすべての列を自動生成します。下の画像のようなグリッドが作成されます。

ご覧のように、データはより実体的に表示されています。Ignite UI がデフォルトで ExpiryDate 列に日付のパイプを適用していることにお気づきでしょう。パイプに不慣れな方のため、Angular パイプとはデータを入力として受け取り、それを希望する出力に変換する機能です。Angular ライブラリは多くの組み込みパイプを提供しています。

UpperCasePipe
LowerCasePipe
CurrencyPipe
PercentPipe
DatePipe

など

autoGenerate = true を設定すると、Ignite UI は DatePipe を日付オブジェクトの列に適用します。適用がない場合、 ExpiryDate は以下の画像のようにレンダリングされます。

このように、autoGenerate = true では、Ignite UI はデータに対して必要なパイプを適用しますが、いくつかの制限があります。例えば、カスタムパイプを使用したり、適用するパイプを手動で選択することはできません。

列をよりよく制御するためには、IgxGrid で列を手動で設定する必要があります。例えば、特定の列のスタイルやデータをフォーマットしたい場合、以下のコードのように手動で IgxGrid の列を設定し、列テンプレートを使用する必要があります。

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
        <igx-column field="Id" header="Id"></igx-column>
        <igx-column field="Title" header="Title"></igx-column>
        <igx-column field="ExpiryDate" header="Expiry Date"></igx-column>
        <igx-column field="Price" header="Price"></igx-column>
        <igx-column field="Rating" header="Rating"></igx-column>
 </igx-grid>

特定の列に対して、ヘッダー、列のプロパティ、データフォーマットを設定できるようになりました。例えば、Price 列に通貨パイプを適用したい場合、以下のコードのように設定します。

ng-template は HTML テンプレートのようなもので、再利用可能であり、レンダリング時にコンテンツを置き換えます。以下のテンプレートを定義するためにng-template を使用することができます。

列テンプレート
ヘッダーテンプレート
ページネーションテンプレート
など

ここでは ng-template には2つのパラメータを渡します。

igxCell : このテンプレートが特定のグリッドセルに適用されることを決定します
let-value : セルに渡されたデータの値が格納されています

ng-template には他にも以下のような入力パラメータがあります。

igxHeader : 列のヘッダーにテンプレートを適用します
let-column : 入力データとして列を含みます

これらの詳細については、カスタムヘッダーのテンプレートに焦点を当てた別の記事で説明します。

では、Price と ExpiryDate 列の表示を通貨と日付のパイプで変更してみましょう。

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title"></igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date }}
        </ng-template>
    </igx-column>
    <igx-column field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency }}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating"></igx-column>
</igx-grid>

グリッドは下の画像のようにレンダリングされます。

パイプにはパラメータを渡すことができます。

パラメータは複数渡すことも可能です。例えば、以下のように、通貨パイプに追加のパラメータを渡すことができます。

日付パイプを使用している場合は以下のようにパラメータを渡すことができます。

また、カスタムパイプを作成した場合は以下のように使用することができます。

ここでは firstcharacteruppercase はカスタムパイプです。カスタムパイプの作り方についてはこちらで詳しく説明しています。

シンプルなパイプの他にも、Ignite UI for Angular の他のコンポーネントを使うことで、列のデータをより見やすくフォーマットすることができます。これについては、別のブログ記事で紹介する予定です。では、これまでのすべてをまとめてみましょう。

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title">
        <ng-template igxCell let-value>
            {{ value | firstcharacteruppercase }}
        </ng-template>
    </igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date :'fullDate'}}
        </ng-template>
    </igx-column>
    <igx-column [sortable]='true' field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency:'CAD':'symbol':'4.2-2'}}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating">
    </igx-column>
</igx-grid>

下の画像に示すようにグリッドがレンダリングされたことがわかります。

さて、自動生成された列を使用している場合はどのような方法でデータをフォーマットすればよいのか疑問に思われるかもしれません。幅、ソート、ページング、データフォーマット、ヘッダースタイル、ピン留めなど、列の他のプロパティはどのように設定すればよいのでしょうか？これについては、別のブログ記事で取り上げる予定です。この記事では、Ignite UI for Angular の Grid のテンプレートを使ってデータを簡単にフォーマットできることがお分かりいただけたと思います。Ignite UI for Angular の Grid については、こちらで詳しく説明しています。パイプについてもっと知りたい方は、こちらの動画Desktop to Web: Angularパイプを利用したデータの変換をご覧ください。