Angularのデータバインディングは、コンポーネント間のデータをDOMに渡す際に重要なトピックです。 今回は、一方向データバインディングと双方向データバインディングについて説明します。
この方法は一方向のデータバインディング方法です。 一方向データ バインディングを使用すると、コンポーネントからビュー、またはビューからコンポーネントにのみデータをバインドできます。 Angular アプリケーションで一方向データ バインディングを使用できるさまざまな方法があります。
- Interpolation Binding
Interpolation は Angular でデータを結合する際に使用する非常によくある方法で、これは UI 要素に値を結合することを指します。
例で示したように、{{Name}} のように中括弧を追加することにより、HTML 要素でバインドされた変数を使用することができます。 この方法は、主に 2 つの値を連結する必要がある場合に使用されます。 {プロパティのバインディング.
これはデータをバインドするために広く使用されている別のアプローチで、このメソッドを使用して、コンポーネントから HTML 要素の DOM プロパティに値をバインドできます。
このような状況で補間を使用すると、ボタンが常に無効になり、変数の値が無視されます。
3 属性バインディング
ビュー要素の属性プロパティを結合するために属性バインディングが使用されます。 colspan 属性を使用してテーブルのいくつかの列をマージする必要があるというシナリオを考えてみましょう。
コメントに示すように値変数を使用するか、プロパティ結合として使用すると、エラーになります。 そのため、attrで始まり、ドットと属性名が続く属性結合を使用する必要があります。 クラス結合
クラス結合の構文は属性結合に非常に似ており、この方法はビュー要素のクラスプロパティを設定するために使用されます。 このバインディング メソッドを使用すると、要素に条件付きで CSS クラスを追加して、動的にスタイルを設定した要素を作成できます。
CSS 属性の赤は学生の評価が 40 より低いときにのみ適用されます。 属性と同様に、クラス結合はキーワード class で始まり、ドットおよびクラス名が続きます。 スタイルバインディング
この方法も前の2つの方法と非常に似ており、インラインのCSSスタイルを設定するためにスタイルバインディングを設定することができます。
Two-Way Data Binding
2way data binding はビューとコンポーネント間の双方向接続で、ユーザーは両方の方法でデータを交換できるようにすることです。 (ngModel) を使用すると、双方向のデータ バインディングを簡単に実現できます。
(ngModel) を使用している場合は、FormsModule を @angular/forms から app.component.ts ファイルにインポートすることを確認してください。