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

データバインディングはAngularJSから直接利用でき、Angularのすべてのバージョンは後でリリースされます。データバインディングには中括弧を使用します-{{}}; このプロセスは補間と呼ばれます。前の例で、変数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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
}

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

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

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 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.component.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">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 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
}

この場合、私たちは 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>

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 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本当のように。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。

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