グリッドでのパイプを使用したデータの書式設定Ignite UI for Angular

ユーザーにデータをどのように提示するかは重要です。多くの場合、データ ソースからのデータをそのままビューアーに表示することはできません。ユーザーは、データのより没入感のあるプレゼンテーションを必要としています。以下に示すデータソースについて考えてみましょう。

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
• カレンシーパイプ
• PercentPipe
• DatePipe etc.

auto generate 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>

特定の列について、ヘッダー、列のプロパティ、およびデータ形式を構成できるようになりました。価格列に通貨パイプを適用するとすると、以下のコードリストに示すようにそれを行うことができます。

ng-template は HTML テンプレートのようなもので再利用可能で、レンダリング時にコンテンツを置き換えます。ng-templateを使用して提供できます

1. Column template
2. ヘッダーテンプレート
3. ページネーションテンプレートなど

ng-templateに2つのパラメータを渡しています

1. ixgCell : このテンプレートが特定のグリッドセルに適用されることを決定します
2. let-value : セルに渡されたデータ値が含まれます

ng-templateの他の可能な入力パラメータは次のとおりです

1. igxHeader : テンプレートを列ヘッダーに適用します
2. let-column : contains column as input data

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

次に、通貨パイプと日付パイプを使用して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>

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

IgxGrid で使用しながら、パイプにパラメーターを渡すこともできます。

パイプでサポートされている任意の数のパラメーターをパイプに渡すことができます。たとえば、以下に示すように、追加のパラメーターを通貨パイプに渡すことができます。

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

カスタムパイプを作成した場合は、次に示すように、カスタムパイプも使用できます。

ここで、firstcharacteruppercaseはカスタム パイプです。作成方法がわからない場合は、こちらで詳細をご覧ください。

単純なパイプだけでなく、列データを書式設定するときに他のIgnite UI for Angularコンポーネントを使用して、視覚化を向上させることもできます。 これについては、別のブログ記事で説明します。以下に示すように、igxGrid上のデータを使用するためにすべてをまとめましょう。

<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グリッドでテンプレートを使用してデータをフォーマットするのがいかに簡単かを知っていただければ幸いです。Ignite UI for Angular Gridの詳細については、こちらをご覧ください。 パイプの詳細については、Desktop to Web: Transforming Data with Angular Pipes のビデオをご覧ください