Angular7-データバインディング

データバインディングは、AngularJSから直接利用でき、Angularのすべてのバージョンは後でリリースされます。データバインディングには中括弧を使用します-\ {\ {}};このプロセスは補間と呼ばれます。前の例で、変数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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];
}

上記の月の配列は、ブラウザのドロップダウンに表示されます。

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

Angularの構文は次のとおりです-

*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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to true
}

*app.componentl*

<!--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 THEN ELSE* 条件を使用して上記の例を説明します。

例

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';

  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = false;//variable is set to true
}

この場合、 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 then else* 条件を使用してみましょう。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to 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 *で作成されます。

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

有効

Angular7-data-binding

Angular7-データバインディング

例

出力

例

目次