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

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

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

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

export class className {
 property: propertytype = value;
}

Затем вы можете привязать свойство тега html к свойству класса.

<html tag htmlproperty = 'property'>

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Основы 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, как показано ниже.

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

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree