Angular 2 — Директивы

Angular 2 — Директивы

От автора: директива — это пользовательский HTML-элемент, который применяется для расширения возможностей HTML. В Angular 2 директивы, которые вызываются как часть модуля BrowserModule, следующие: ngif и ngFor.

Если вы просмотрите файл app.module.ts, то увидите следующий код и модуль BrowserModule. Определив этот модуль, вы получите доступ к двум директивам.

Теперь давайте подробно рассмотрим каждую директиву.

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

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

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

ngIf

Элемент ngif используется для добавления элементов в HTML-код, если он оценивает значение, как true, в противном случае элементы в HTML-код не добавляются.

Синтаксис

Если выражение оценивается как true, то добавляются соответствующие элементы, иначе элементы не добавляются. Давайте теперь рассмотрим пример того, как мы можем использовать директиву *ngif.

Шаг 1 — Сначала добавьте свойство в класс с именем appStatus. Оно будет иметь тип Boolean. Давайте сохраним его значение как true.

Шаг 2 — Теперь в файле app.component.html добавьте следующий код.

В данном коде теперь содержится директива *ngIf. В директиве мы оцениваем значение свойства appStatus. Поскольку значение свойства должно быть true, это означает, что тег div должен отображаться в браузере. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.

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

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

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

Вывод

Angular 2 — Директивы

ngFor

Элемент ngFor используется для элементов, исходя из оценки условия цикла For. Синтаксис

variable — это временная переменная для отображения значений в variablelist. Давайте теперь рассмотрим пример того, как мы можем использовать директиву *ngFor.

Шаг 1 — Сначала добавьте свойство в класс с именем appList. Оно будет иметь тип, который можно использовать для определения любого типа массивов.

Таким образом, мы определяем appList как массив, который содержит 2 элемента. Каждый элемент имеет 2 дополнительных свойства — ID и Name.

Шаг 2 — В app.component.html определите следующий код.

В приведенном выше коде мы теперь используем директиву ngFor для обработки через цикл массива appList. Затем мы определяем список, в котором каждый элемент списка является идентификатором и параметром имени массива. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.

Вывод

Angular 2 — Директивы

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree