Angular 2 - wiązanie danych
Dwukierunkowe wiązanie było funkcjonalnością w Angular JS, ale zostało usunięte z Angular 2.x. Ale teraz, od zdarzenia klas w Angular 2, możemy powiązać właściwości w klasie AngularJS.
Załóżmy, że masz klasę z nazwą klasy, właściwością, która ma typ i wartość.
export class className {
property: propertytype = value;
}
Następnie można powiązać właściwość znacznika HTML z właściwością klasy.
<html tag htmlproperty = 'property'>
Wartość właściwości zostanie wówczas przypisana do właściwości htmlwłaściwości html.
Spójrzmy na przykład, jak możemy osiągnąć powiązanie danych. W naszym przykładzie przyjrzymy się wyświetlaniu obrazów, w których źródło obrazów będzie pochodziło z właściwości w naszej klasie. Poniżej przedstawiono kroki, aby to osiągnąć.
Step 1- Pobierz 2 dowolne obrazy. W tym przykładzie pobierzemy kilka prostych obrazów pokazanych poniżej.
Step 2 - Przechowuj te obrazy w folderze o nazwie Imagesw katalogu aplikacji. Jeśli folder obrazów nie istnieje, utwórz go.
Step 3 - Dodaj następującą zawartość w app.component.ts, jak pokazano poniżej.
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 - Dodaj następującą zawartość w app.component.html, jak pokazano poniżej.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
W powyższym pliku app.component.html uzyskujemy dostęp do obrazów z właściwości w naszej klasie.
Wynik
Wynik powyższego programu powinien wyglądać następująco -