Angular 6 - Data Binding
Il Data Binding è disponibile direttamente da AngularJS, Angular 2,4 ed è ora disponibile anche in Angular 6. Usiamo le parentesi graffe per il data binding - {{}}; questo processo è chiamato interpolazione. Abbiamo già visto nei nostri esempi precedenti come abbiamo dichiarato il valore alla variabile title e lo stesso viene stampato nel browser.
La variabile in app.component.html il file è indicato come {{titolo}} e il valore del titolo è inizializzato nel file app.component.ts file e in app.component.html, viene visualizzato il valore.
Creiamo ora un menu a discesa di mesi nel browser. Per farlo, abbiamo creato una serie di mesi inapp.component.ts come segue -
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"];
}
L'array del mese mostrato sopra deve essere visualizzato in un menu a discesa nel browser. Per questo, useremo la seguente riga di codice:
<!--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>
Abbiamo creato il normale tag di selezione con opzione. In opzione, abbiamo utilizzato ilfor loop. Ilfor loop viene utilizzato per iterare nell'array dei mesi, che a sua volta creerà il tag di opzione con il valore presente nei mesi.
La sintassi for in angolare è *ngFor = "let I of months" e per ottenere il valore dei mesi lo stiamo visualizzando in {{i}}.
Le due parentesi graffe aiutano con l'associazione dei dati. Dichiari le variabili nel tuo fileapp.component.ts file e lo stesso verrà sostituito utilizzando le parentesi graffe.
Vediamo l'output dell'array del mese precedente nel browser
La variabile impostata in app.component.ts può essere associato con il app.component.htmlusando le parentesi graffe; per esempio,{{}}.
Vediamo ora di visualizzare i dati nel browser in base alla condizione. Qui abbiamo aggiunto una variabile e assegnato il valore come vero. Usando l'istruzione if, possiamo nascondere / mostrare il contenuto da visualizzare.
Esempio
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>
Produzione
Proviamo l'esempio sopra usando il IF THEN ELSE condizione.
Esempio
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;
}
In questo caso, abbiamo creato il file isavailablevariabile come false. Per stampare il fileelse condizione, dovremo creare il file ng-template come segue -
<ng-template #condition1>Condition is invalid</ng-template>
Il codice completo ha questo aspetto:
<!--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 viene utilizzato con la condizione else e la variabile utilizzata è condition1. Lo stesso è assegnato come fileid al ng-templatee quando la variabile disponibile è impostata su false il testo Condition is invalid È visualizzato.
La seguente schermata mostra la visualizzazione nel browser.
Usiamo ora il file if then else condizione.
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;
}
Ora creeremo la variabile isavailablecome vero. In html, la condizione è scritta nel modo seguente:
<!--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>
Se la variabile è vera, allora condition1, altro condition2. Ora vengono creati due modelli con id#condition1 e #condition2.
La visualizzazione nel browser è la seguente: