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

17

Від автора: розглянемо ще один принцип того, як працюють в 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.

Ми також визначили властивість TutorialName, яке має значення Angular 2.

Крок 2 — Внесіть наступні зміни в файл app/app.component.html, який є файлом шаблону.

The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0]}}
The second Topic is {{appList[1]}}
The third Topic is {{appList[2]}}

У наведеному вище коді необхідно зазначити наступне.

Ми посилаємося на властивість TutorialName, щоб вказати назву керівництва на нашій HTML-сторінці.

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

Крок 3 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат. Ви можете чітко бачити, що дані відображаються відповідно зі значеннями властивостей у класі.

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

Інший простий приклад коду, який прив’язується на льоту — використання html-тега input. Він просто відображає дані, оскільки самі дані беруться з html-тега. Змініть наступним чином файл app/app.component.html, який є файлом шаблону.

{{name}}

У наведеному вище коді необхідно зазначити наступне.

[value] = «username»- використовується для прив’язки вираження username до значення властивості елемента вводу.

(input) = «expression»- це декларативний спосіб прив’язки вирази до вхідного події елемента вводу.

username = $event.target.value — вираз, який виконується при запуску вхідного події.

$event — в об’єкті $event лежать дані, які характерні для нативного об’єкта подій.

Коли ви збережете всі зміни в коді і оновіть сторінку браузера, то отримаєте наступний результат.

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

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

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