Компоненты Angular 2 — отображение данных

Компоненты Angular 2 — отображение данных

От автора: рассмотрим еще один принцип того, как работают в Angular компоненты. В Angular JS можно очень просто отображать значения свойств класса в HTML-форме. Давайте рассмотрим практический пример. А именно в этом примере мы рассмотрим отображение значений различных свойств в классе на HTML- странице.

Шаг 1 — Измените код в файле app.component.ts следующим образом.

import {
  Component
} from '@angular/core';
 
@Component ({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
 
export class AppComponent {
  TutorialName: string = 'Angular JS2';
  appList: string[] = ["Binding", "Display", "Services"];
}

В приведенном выше коде необходимо отметить следующее.

Мы определяем массив с именем appList, который имеет тип string.

Мы определяем три строковых элемента в качестве составляющих массива, а именно Binding, Display, Services.

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

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

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

Мы также определили свойство TutorialName, которое имеет значение Angular 2.

Шаг 2 — Внесите следующие изменения в файл app/app.component.html, который является файлом шаблона.

<div>
  The name of this Tutorial is {{TutorialName}}<br>
  The first Topic is {{appList[0]}}<br>
  The second Topic is {{appList[1]}}<br>
  The third Topic is {{appList[2]}}<br>
</div>

В приведенном выше коде необходимо отметить следующее.

Мы ссылаемся на свойство TutorialName, чтобы «указать название руководства на нашей HTML-странице».

Мы используем значение индекса для массива для отображения каждого из трех его элементов.

Шаг 3 — Сохраните все изменения в коде и обновите страницу браузера, вы получите следующий результат. Вы можете четко видеть, что данные отображаются в соответствии со значениями свойств в классе.

Компоненты Angular 2 — отображение данных

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

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

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

Другой простой пример кода, который привязывается на лету — использование html-тега input. Он просто отображает данные, поскольку сами данные берутся из html-тега. Измените следующим образом файл app/app.component.html, который является файлом шаблона.

<div>
  <input [value] = "name" (input) = "name = $event.target.value">
  {{name}}
</div>

В приведенном выше коде необходимо отметить следующее.

[value] = ”username”- используется для привязки выражения username к значению свойства элемента ввода.

(input) = ”expression”- это декларативный способ привязки выражения к входному событию элемента ввода.

username = $event.target.value — выражение, которое выполняется при запуске входящего события.

$event — в объекте $event лежат данные, которые характерны для нативного объекта событий.

Когда вы сохраните все изменения в коде и обновите страницу браузера, то получите следующий результат.

Компоненты Angular 2 — отображение данных

Теперь введите что-то в поле ввода, например «Tutorialspoint». Результат будет соответствующим образом изменен.

Компоненты Angular 2 — отображение данных

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

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

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

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

Узнать подробнее
Самые свежие новости 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