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 プロパティの値と連結してみましょう。

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

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

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

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

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

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

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

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

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

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

getTitle() {
  return 'Simple Title';
}

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

export class SampleComponent implements OnInit {

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

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

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

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

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

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

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

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

Note

バインディングがデータ型の結果に依存する場合、プロパティバインディングを使用する必要があることに注意してください。バインディングが単に文字列値に依存している場合は、補間を使用する必要があります。

その他のリソース

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

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

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

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