Angulaire 6 - Liaison de données
La liaison de données est disponible directement à partir d'AngularJS, Angular 2,4 et est désormais également disponible dans Angular 6. Nous utilisons des accolades pour la liaison de données - {{}}; ce processus est appelé interpolation. Nous avons déjà vu dans nos exemples précédents comment nous avons déclaré la valeur du titre de la variable et que la même chose est imprimée dans le navigateur.
La variable dans le app.component.html le fichier est appelé {{title}} et la valeur de title est initialisée dans le app.component.ts fichier et dans app.component.html, la valeur s'affiche.
Créons maintenant une liste déroulante des mois dans le navigateur. Pour ce faire, nous avons créé une série de mois enapp.component.ts comme suit -
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"];
}Le tableau du mois indiqué ci-dessus doit être affiché dans une liste déroulante du navigateur. Pour cela, nous utiliserons la ligne de code suivante -
<!--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>Nous avons créé la balise de sélection normale avec option. En option, nous avons utilisé lefor loop. lefor loop est utilisé pour parcourir le tableau des mois, ce qui créera à son tour la balise d'option avec la valeur présente dans les mois.
La syntaxe for dans Angular est *ngFor = "let I of months" et pour obtenir la valeur des mois, nous l'afficherons en {{i}}.
Les deux accolades facilitent la liaison de données. Vous déclarez les variables dans votreapp.component.ts fichier et le même sera remplacé en utilisant les accolades.
Voyons la sortie du tableau du mois ci-dessus dans le navigateur
La variable définie dans le app.component.ts peut être lié avec le app.component.htmlen utilisant les accolades; par exemple,{{}}.
Affichons maintenant les données dans le navigateur en fonction des conditions. Ici, nous avons ajouté une variable et attribué la valeur true. En utilisant l'instruction if, nous pouvons masquer / afficher le contenu à afficher.
Exemple
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>Production
Essayons l'exemple ci-dessus en utilisant le IF THEN ELSE état.
Exemple
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;
}Dans ce cas, nous avons fait le isavailablevariable comme faux. Pour imprimer leelse condition, nous devrons créer le ng-template comme suit -
<ng-template #condition1>Condition is invalid</ng-template>Le code complet ressemble à ceci -
<!--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 est utilisé avec la condition else et la variable utilisée est condition1. Le même est attribué comme unid à la ng-template, et lorsque la variable disponible est définie sur false, le texte Condition is invalid est affiché.
La capture d'écran suivante montre l'affichage dans le navigateur.
Utilisons maintenant le if then else état.
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;
}Maintenant, nous allons rendre la variable isavailablecomme vrai. Dans le html, la condition s'écrit de la manière suivante -
<!--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>Si la variable est vraie, alors condition1, autre condition2. Maintenant, deux modèles sont créés avec id#condition1 et #condition2.
L'affichage dans le navigateur est le suivant -