Angular の一方向データ バインディングの概要

Angular の一方向データ バインディングは、コンポーネントからビュー (DOM) に、またはその逆に、ビューからコンポーネントにデータをバインドする方法です。基になるデータの変更ごとに自動的に同期される情報をエンドユーザーに表示するために使用されます。これは、WPF の一方向バインディングに似ています。

Angular データ バインディングの概要

データ バインディングは、このタイプのサービスにより UI の更新プロセスが大幅に効率化され、アプリ構築時の定型文の量も削減されるため広く使用されています。Angular のデータ バインディングは非常に簡単で、WPF とは異なり、データ コンテキスト、ビューモデル、または INotifyPropertyChanged (INPC) の定義は必要ありません。必要なのは、HTML ファイルと typescript ファイルのみです。データ バインディングでは、最初にバインドするプロパティが必要です。それでは、text というプロパティをコンポーネント クラスに追加し、その値を設定しましょう。 WPF では、DataContext を設定し、XAML でプロパティをバインドします。

public class IgniteUIClass
{
  public string Text  { get; set; }
  
  public IgniteUIClass()
  { 
    this.Text = "IgniteUI for Angular";
  }
}
...
public MainWindow()
{
  InitializeComponent();
  this.DataContext = new IgniteUIClass();
}

<Label Content="{Binding Path=Text, Mode=OneWay}"></Label>

Angular では、DOM プロパティをコンポーネントのプロパティに直接バインドしています。

export class SampleComponent implements OnInit {

  text = 'IgniteUI for Angular';

  constructor() { }
  ngOnInit() {}
}

<h2>{{ text }}</h2>

Angular データ バインディングの補間

上記のコードでは、text プロパティの値へのバインディングを使用して、HTML にテキストを表示するだけです。ここでは、補間を使用して一方向のバインディングを作成しています。次に二重中括弧、プロパティの名前 (ここでは text)、2 つの閉じ中括弧を入力します。同じ結果となる他の方法として、補間構文を再度使用して、h2 タグを作成し、text プロパティをその innerHTML プロパティにバインドがあります。

<h2 innerHTML="{{ text }}"></h2>

補間には 2 つの重要なことがあります。

• 1 つ目は、中括弧内のすべてが string としてレンダリング、
• 2 つ目は、中括弧内のすべてがテンプレート式として参照されることです。これにより、連結などのより複雑な処理ができます。

たとえば、いくつかのテキストを text プロパティの値と連結してみましょう。

テンプレート式を使用すると、javascript のプロパティとメソッドにもバインドできます。たとえば、text プロパティの長さにバインドすると、20 という結果になります。

<h2>{{"Welcome to " + text }}</h2>

toUpperCase() など、そのプロパティのメソッドにバインドすることもできます。

<h2>{{ text.length }}</h2>

これは、WPF のデータ バインディングよりも高機能で、非常に使いやすくなっています。テンプレート式内で数学的計算を行うこともできます。たとえば、式に単純に 2 + 2 を入力すると、4 に等しい結果が表示されます。

<h2>{{ text.toUpperCase() }}</h2>

もう 1 つの機能は、typescript ファイルから実際のメソッドへのバインドです。これを実現する方法の簡単な例を次に示します。

<h2>{{ 2 + 2 }}</h2>

この getTitle() は、typescript ファイルで定義されているメソッドです。ページ上の結果は、そのメソッドの戻り値です。

<h2>{{ getTitle() }}</h2>

補間は非常に強力に見えますが、たとえば、string のみを表すという制限があります。 それでは、コンポーネント クラスに単純なブール プロパティを作成しましょう。

getTitle() {
  return 'Simple Title';
}

テキストタイプの単純な input を作成し、isDisabled プロパティを入力の disabled プロパティにバインドします。

export class SampleComponent implements OnInit {

  text = 'IgniteUI for Angular';
  isDisabled = false;
  constructor() { }
...

結果は、input が有効のはずですが、無効になっています。これは、補間によって文字列が返されますが、入力の disabled プロパティはブール型であり、ブール値が必要なためです。 これを正しく機能させるために、Angular はプロパティ バインディングを提供します。

<input type="text" disabled="{{ isDisabled }}">

The expected result is that the input should be enabled, but it’s disabled. This is because the interpolation returns a string, but the input’s disabled property is of boolean type and it requires a boolean value. In order for this to work correctly, Angular provides property binding.

Angular プロパティ バインディング

Angular のプロパティ バインディングは、HTML 要素またはディレクティブのターゲットプロパティの値をバインドするために使用されます。ここでの構文は、補間の構文とは少し異なります。プロパティ バインドでは、プロパティ名は角かっこで囲まれ、その値には中かっこは含まれません。バインドされるプロパティの名前だけです。

<input type="text" [disabled]="isDisabled">

プロパティ バインディングを使用することにより、入力の disabled プロパティは、文字列ではなくブール値の結果にバインドされます。isDisabled 値は false であり、アプリを実行すると、入力が有効として表示されます。

その他のリソース

• デスクトップから Web: Angular 補間とプロパティバインディングによる一方向データバインディング
• 双方向バインディング
• Angular データの表示

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

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