Angular 4-データバインディング

データバインディングは、AngularJS、Angular 2から直接利用でき、Angular 4でも利用できるようになりました。データバインディングには中括弧を使用します-\ {\ {}};このプロセスは補間と呼ばれます。前の例で、変数titleに値を宣言する方法を既に見てきました。同じ値がブラウザーに出力されます。

*app.componentl* ファイルの変数は\ {\ {title}}として参照され、titleの値は *app.component.ts* ファイルで初期化され、 *app.componentl* では値が表示されます。

ここで、ブラウザで数ヶ月のドロップダウンを作成しましょう。それを行うには、次のように app.component.ts に月の配列を作成しました-

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May",
            "June", "July", "August", "September",
            "October", "November", "December"];
}

上記の月の配列は、ブラウザのドロップダウンに表示されます。このために、次のコード行を使用します-

<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>

オプション付きの通常の選択タグを作成しました。オプションでは、* forループ*を使用しました。 * forループ*は、月の配列を反復処理するために使用されます。これにより、月に存在する値でオプションタグが作成されます。

Angularの for 構文は* ngFor =“ let I of months” であり、月の値を取得するために\ {\ {i}}に表示しています。

2つの中括弧は、データバインディングに役立ちます。 app.component.ts ファイルで変数を宣言すると、中括弧を使用して同じ変数が置き換えられます。

上記の月の配列の出力をブラウザで見てみましょう

ブラウザで月の配列を出力

*app.component.ts* で設定される変数は、中括弧を使用して *app.componentl* とバインドできます。例えば、 *\{\{}}*。

条件に基づいてブラウザにデータを表示してみましょう。ここでは、変数を追加し、値をtrueに割り当てています。 ifステートメントを使用して、表示するコンテンツを非表示/表示できます。

例

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;  //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid.</span>
  //over here based on if condition the text condition is valid is displayed.
   If the value of isavailable is set to false it will not display the text.
</div>

出力

IFステートメントを使用した出力

*IF THEN ELSE* 条件を使用して上記の例を試してみましょう。

例

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

この場合、 isavailable 変数をfalseにしました。 else 条件を印刷するには、次のように ng-template を作成する必要があります-

<ng-template #condition1>Condition is invalid</ng-template>

完全なコードは次のようになります-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

*If* はelse条件で使用され、使用される変数は *condition1* です。 同じものが *id* として *ng-template* に割り当てられ、利用可能な変数がfalseに設定されると、テキスト *Condition is invalid* が表示されます。

次のスクリーンショットは、ブラウザーでの表示を示しています。

If-Else条件を使用した出力

*if then else* 条件を使用してみましょう。

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

ここで、変数を isavailable としてtrueにします。 HTMLでは、条件は次のように書かれています-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

変数がtrueの場合、 condition1 、そうでない場合は condition2 。これで、2つのテンプレートがID ＃condition1 *および＃condition2 *で作成されます。

ブラウザでの表示は次のとおりです-

If-Then-Else条件を使用した出力

Angular4-data-binding

目次

Angular 4-データバインディング

例

出力

例