Основи Angular 2 — Привязка даних

11

Від автора: продовжуємо вивчати основи Angular 2. Двостороння прив’язка була частина функціоналу Angular JS, але з Angular 2.x і вище вона була видалена. Однак зараз, оскільки в Angular 2 доступні події класів, ми можемо прив’язуватися до властивостей у класі AngularJS.

Припустимо, у вас є клас з ім’ям класу, властивість, що має тип і значення.

export class className {
property: propertytype = value;
}

Потім ви можете прив’язати властивість тега html до властивості класу.

Тоді значення властивості буде присвоєно htmlproperty html. Давайте розглянемо на приклад, як ми можемо реалізувати прив’язку даних. У нашому прикладі ми розглянемо відображення зображень, в яких джерело зображень буде виходити з властивостей в нашому класі. Нижче наведені етапи реалізації цього сценарію.

Крок 1 — Завантажте будь-2 зображення. У нашому прикладі ми завантажимо кілька простих зображень, приведених нижче.

Основи Angular 2 — Привязка даних

Крок 2 — Зберегти ці зображення в папці Images в каталозі програми. Якщо папку Images у вас немає, створіть її.

Крок 3 — Додайте наступний контент в файл app.component.ts, як показано нижче.

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’
} ];
}

Крок 4 — Додайте наступний контент в файл app.component.html як показано нижче.

  • {{lst.ID}}
  • Основи Angular 2 — Привязка даних

У наведеному вище файлі app.component.html ми отримуємо зображення з властивостей у класі.