Angular 2 - Data Binding
L'associazione a due vie era una funzionalità in Angular JS, ma è stata rimossa da Angular 2.x in poi. Ma ora, dall'evento delle classi in Angular 2, possiamo legarci alle proprietà nella classe AngularJS.
Supponiamo di avere una classe con un nome di classe, una proprietà con un tipo e un valore.
export class className {
property: propertytype = value;
}È quindi possibile associare la proprietà di un tag html alla proprietà della classe.
<html tag htmlproperty = 'property'>Il valore della proprietà verrebbe quindi assegnato alla proprietà html dell'html.
Diamo un'occhiata a un esempio di come possiamo ottenere il data binding. Nel nostro esempio, esamineremo la visualizzazione di immagini in cui l'origine delle immagini verrà dalle proprietà nella nostra classe. Di seguito sono riportati i passaggi per raggiungere questo obiettivo.
Step 1- Scarica 2 immagini qualsiasi. Per questo esempio, scaricheremo alcune semplici immagini mostrate di seguito.
Step 2 - Memorizza queste immagini in una cartella chiamata Imagesnella directory dell'app. Se la cartella delle immagini non è presente, creala.
Step 3 - Aggiungi il seguente contenuto in app.component.ts come mostrato di seguito.
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 - Aggiungi il seguente contenuto in app.component.html come mostrato di seguito.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>Nel file app.component.html sopra, stiamo accedendo alle immagini dalle proprietà della nostra classe.
Produzione
L'output del programma precedente dovrebbe essere così:
