Учебники

Angular 2 — привязка данных

Октябрь 15, 2018

Двухстороннее связывание было функциональностью в Angular JS, но было удалено из Angular 2.x и далее. Но теперь, так как событие классов в Angular 2, мы можем связать со свойствами в классе AngularJS.

Предположим, если у вас есть класс с именем класса, свойство, которое имеет тип и значение. 

export class className {
   property: propertytype = value;
}

Затем можно связать свойство тега html со свойством класса. 

<html tag htmlproperty = 'property'>

Затем значение свойства будет присвоено свойству html html.

Давайте посмотрим на пример того, как мы можем добиться привязки данных. В нашем примере мы рассмотрим отображение изображений, в которых источник изображений будет получен из свойств нашего класса. Ниже приведены шаги для достижения этой цели.

Шаг 1 — Загрузите любые 2 изображения. Для этого примера мы загрузим несколько простых изображений, показанных ниже.

Загрузка изображений

Шаг 2 — Сохраните эти изображения в папке с изображениями в каталоге приложения. Если папка с изображениями отсутствует, создайте ее.

Шаг 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, как показано ниже. 

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

В приведенном выше файле app.component.html мы получаем доступ к изображениям из свойств нашего класса.

Выход

Вывод вышеупомянутой программы должен быть таким:

47
Share: