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

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

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

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

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

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

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

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

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

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

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

Шаг 3 — Добавьте следующий контент в файл app.component.ts, как показано ниже.

Шаг 4 — Добавьте следующий контент в файл app.component.html, как показано ниже.

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

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

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

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

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

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

Овладейте азами работы с Angular 4

Получить

Метки:

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

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

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

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