От автора: продолжаем изучать основы Angular 2. Двусторонняя привязка являлась часть функционала Angular JS, но из Angular 2.x и выше она была удалена. Однако сейчас, поскольку в Angular 2 доступны события классов, мы можем привязываться к свойствам в классе AngularJS.
Предположим, у вас есть класс с именем класса, свойство, имеющее тип, и значение.
|
1 2 3 |
export class className { property: propertytype = value; } |
Затем вы можете привязать свойство тега html к свойству класса.
|
1 |
<html tag htmlproperty = 'property'> |
Тогда значение свойства будет присвоено htmlproperty html. Давайте рассмотрим на пример, как мы можем реализовать привязку данных. В нашем примере мы рассмотрим отображение изображений, в которых источник изображений будет получаться из свойств в нашем классе. Ниже приведены этапы реализации этого сценария.
Шаг 1 — Загрузите любые 2 изображения. В нашем примере мы загрузим несколько простых изображений, приведенных ниже.
Шаг 2 — Сохраните эти изображения в папке Images в каталоге приложения. Если папка Images у вас отсутствует, создайте ее.
Шаг 3 — Добавьте следующий контент в файл app.component.ts, как показано ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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, как показано ниже.
|
1 2 3 4 5 6 |
<div *ngFor = 'let lst of appList'> <ul> <li>{{lst.ID}}</li> <img [src] = 'lst.url'> </ul> </div> |
В приведенном выше файле app.component.html мы получаем изображения из свойств в классе.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
