Angular7 - Associazione dati

Il Data Binding è disponibile direttamente da AngularJS e tutte le versioni di Angular rilasciate successivamente. 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 file è indicato come {{title}} e il valore di title viene inizializzato in 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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "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.

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 per in Angular è la seguente:

*ngFor = “let I of months”

e per ottenere il valore dei mesi in cui lo mostriamo -

{{i}}

Le due parentesi graffe aiutano con l'associazione dei dati. Dichiari le variabili nel tuo file app.component.ts e le stesse verranno sostituite utilizzando le parentesi graffe.

Di seguito è riportato l'output dell'array del mese precedente nel browser:

La variabile impostata in app.component.ts può essere associato all'interno del file app.component.htmlutilizzando 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 cometrue. 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 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>

Produzione

Cerchiamo di spiegare 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 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
}

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 è fornito di seguito -

<!--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 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 
}

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: