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 -