Angular パイプでデータを変換

WPF コンバーターに類似した、Angular パイプを使用してデータを変換する方法を学びます。このテクニックは、WPF コンバーターに似ています。

WPF では、データをある値から別の値に変換するために、IValueConverter を使用します。Angular アプリケーションでデータを変換するには、Pipe を使用します。パイプは WPF コンバーターにとても似ています。データを入力として受け取り、そのデータを表示用の目的の出力に変換します。

Angular は、最も一般的なデータ変換用に事前定義された多数のパイプを提供します。たとえば、ヘッダー テキストを大文字で表示する場合は、UpperCasePipe を使用できます。パイプの使用はとても簡単です。式の後に、パイプ演算子 | とその後にパイプ名を提供します。

<h2>{{ header | uppercase }}</h2>

WPF コンバーターと比較した場合の Angular のパイプの利点は、一度に複数のパイプを使用できることです。たとえば、DatePipe と UpperCasePipe を使用して、日付を使いやすい形式にフォーマットし、大文字にすることができます。

<h2>{{ birthday | date | uppercase }}</h2>

更に、パイプにパラメーターを提供するオプションもあります。たとえば、DatePipe には、形式、タイムゾーン、ロケールなどのパラメーターがあります。

<h2>{{ birthday | date:"MM/dd/yy" }}</h2>

パイプの作成

事前定義されたパイプを使用する以外に、Angular では独自のパイプを定義できます。以下は、文字列を別の文字列に置き換える WPF コンバーターの実装です。

public class ReplaceConverter : IValueConverter
{
    public string OldValue { get; set; }
    public string NewValue { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var strValue = value.ToString();
        return strValue.Replace(this.OldValue, this.NewValue);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

<Window.Resources>
    <local:ReplaceConverter OldValue=" " NewValue="-" x:Key="replaceConverter"></local:ReplaceConverter>
</Window.Resources>
<Grid>
    <TextBlock Text="{Binding Path=Name, Mode=OneWay, Converter={StaticResource replaceConverter}}"></TextBlock>
</Grid>

Angular で同じことを行うには、PipeTransform インターフェイスを実装し、@Pipe デコレータを持つクラスを定義する必要があります。

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

@Pipe({
    name: 'replace'
})
export class ReplacePipe implements PipeTransform {

    transform(value: string, oldValue: string, newValue: string): string {
        return value.replace(oldValue, newValue);
    }
}

<span>{{ name | replace:" ":"-" }}</span>

その他のリソース

• デスクトップから Web: Angular パイプを使用したデータの変換
• Angular パイプ
• 事前定義された Angular パイプのリスト

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)