Angulaire 2 - Liaison de données
La liaison bidirectionnelle était une fonctionnalité dans Angular JS, mais a été supprimée à partir d'Angular 2.x. Mais maintenant, depuis l'événement des classes dans Angular 2, on peut se lier aux propriétés de la classe AngularJS.
Supposons que si vous aviez une classe avec un nom de classe, une propriété qui avait un type et une valeur.
export class className {
property: propertytype = value;
}Vous pouvez ensuite lier la propriété d'une balise html à la propriété de la classe.
<html tag htmlproperty = 'property'>La valeur de la propriété serait alors affectée à la propriété html du html.
Regardons un exemple de la façon dont nous pouvons réaliser la liaison de données. Dans notre exemple, nous examinerons l'affichage d'images dans lesquelles la source des images proviendra des propriétés de notre classe. Voici les étapes pour y parvenir.
Step 1- Téléchargez 2 images quelconques. Pour cet exemple, nous téléchargerons quelques images simples ci-dessous.
Step 2 - Stockez ces images dans un dossier appelé Imagesdans le répertoire de l'application. Si le dossier images n'est pas présent, veuillez le créer.
Step 3 - Ajoutez le contenu suivant dans app.component.ts comme indiqué ci-dessous.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [ {
"ID": "1",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"url": 'app/Images/Two.jpg'
} ];
}Step 4 - Ajoutez le contenu suivant dans app.component.html comme indiqué ci-dessous.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>Dans le fichier app.component.html ci-dessus, nous accédons aux images à partir des propriétés de notre classe.
Production
La sortie du programme ci-dessus devrait être comme ceci -
