От автора: директива — это пользовательский HTML-элемент, который применяется для расширения возможностей HTML. В Angular 2 директивы, которые вызываются как часть модуля BrowserModule, следующие: ngif и ngFor.
Если вы просмотрите файл app.module.ts, то увидите следующий код и модуль BrowserModule. Определив этот модуль, вы получите доступ к двум директивам.
|
1 2 3 4 5 6 7 8 9 10 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Теперь давайте подробно рассмотрим каждую директиву.
ngIf
Элемент ngif используется для добавления элементов в HTML-код, если он оценивает значение, как true, в противном случае элементы в HTML-код не добавляются.
Синтаксис
|
1 |
*ngIf = 'выражение' |
Если выражение оценивается как true, то добавляются соответствующие элементы, иначе элементы не добавляются. Давайте теперь рассмотрим пример того, как мы можем использовать директиву *ngif.
Шаг 1 — Сначала добавьте свойство в класс с именем appStatus. Оно будет иметь тип Boolean. Давайте сохраним его значение как true.
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { appTitle: string = 'Welcome'; appStatus: boolean = true; } |
Шаг 2 — Теперь в файле app.component.html добавьте следующий код.
|
1 |
<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div> |
В данном коде теперь содержится директива *ngIf. В директиве мы оцениваем значение свойства appStatus. Поскольку значение свойства должно быть true, это означает, что тег div должен отображаться в браузере. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.
Вывод
ngFor
Элемент ngFor используется для элементов, исходя из оценки условия цикла For. Синтаксис
|
1 |
*ngFor = 'let variable of variablelist' |
variable — это временная переменная для отображения значений в variablelist. Давайте теперь рассмотрим пример того, как мы можем использовать директиву *ngFor.
Шаг 1 — Сначала добавьте свойство в класс с именем appList. Оно будет иметь тип, который можно использовать для определения любого типа массивов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { appTitle: string = 'Welcome'; appList: any[] = [ { "ID": "1", "Name" : "One" }, { "ID": "2", "Name" : "Two" } ]; } |
Таким образом, мы определяем appList как массив, который содержит 2 элемента. Каждый элемент имеет 2 дополнительных свойства — ID и Name.
Шаг 2 — В app.component.html определите следующий код.
|
1 2 3 4 5 6 |
<div *ngFor = 'let lst of appList'> <ul> <li>{{lst.ID}}</li> <li>{{lst.Name}}</li> </ul> </div> |
В приведенном выше коде мы теперь используем директиву ngFor для обработки через цикл массива appList. Затем мы определяем список, в котором каждый элемент списка является идентификатором и параметром имени массива. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.
Вывод
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
