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

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

の変数 app.component.html ファイルは{{title}}と呼ばれ、titleの値はで初期化されます。 app.component.ts ファイルと app.component.html、値が表示されます。

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 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 loop。ザ・for loop は、月の配列を反復処理するために使用されます。これにより、月に存在する値を使用してオプションタグが作成されます。

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

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

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

に設定されている変数 app.component.ts とバインドすることができます app.component.html中括弧を使用する。例えば、{{}}。

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

例

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   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 THEN ELSE 状態。

例

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   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;
}

この場合、私たちは isavailablefalseとして変数。印刷するには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.component.html',
   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本当のように。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。

ブラウザでの表示は以下のとおりです。