Від автора: продовжуємо вивчати основи Angular 2. Двостороння прив’язка була частина функціоналу Angular JS, але з Angular 2.x і вище вона була видалена. Однак зараз, оскільки в Angular 2 доступні події класів, ми можемо прив’язуватися до властивостей у класі AngularJS.
Припустимо, у вас є клас з ім’ям класу, властивість, що має тип і значення.
export class className {
property: propertytype = value;
}
Потім ви можете прив’язати властивість тега html до властивості класу.
Тоді значення властивості буде присвоєно htmlproperty html. Давайте розглянемо на приклад, як ми можемо реалізувати прив’язку даних. У нашому прикладі ми розглянемо відображення зображень, в яких джерело зображень буде виходити з властивостей в нашому класі. Нижче наведені етапи реалізації цього сценарію.
Крок 1 — Завантажте будь-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}}
У наведеному вище файлі app.component.html ми отримуємо зображення з властивостей у класі.
