Angular 6 - привязка данных
Связывание данных доступно прямо из AngularJS, Angular 2,4, а теперь также доступно в Angular 6. Для привязки данных мы используем фигурные скобки - {{}}; этот процесс называется интерполяцией. Мы уже видели в наших предыдущих примерах, как мы объявляли значение переменной title, и то же самое печатается в браузере.
Переменная в app.component.html файл называется {{title}}, а значение заголовка инициализируется в app.component.ts файл и в app.component.html, значение отображается.
Давайте теперь создадим в браузере выпадающий список месяцев. Для этого мы создали массив месяцев вapp.component.ts следующим образом -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
// declared array of months.
months = ["January", "Feburary", "March", "April", "May",
"June", "July", "August", "September",
"October", "November", "December"];
}
Массив месяца, показанный выше, должен отображаться в раскрывающемся списке браузера. Для этого мы будем использовать следующую строку кода -
<!--The content below is only a placeholder and can be replaced. -->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
Мы создали обычный тег выбора с параметром option. В качестве опции мы использовалиfor loop. Вfor loop используется для перебора массива месяцев, который, в свою очередь, создает тег option со значением, представленным в месяцах.
Синтаксис for в Angular есть *ngFor = "let I of months" и чтобы получить значение месяцев, мы отображаем его в {{i}}.
Две фигурные скобки помогают при привязке данных. Вы объявляете переменные в своемapp.component.ts файл и то же будет заменено фигурными скобками.
Давайте посмотрим, что выводит указанный выше массив за месяц в браузере.
Переменная, установленная в app.component.ts можно связать с app.component.htmlс помощью фигурных скобок; например,{{}}.
Давайте теперь отображаем данные в браузере на основе условия. Здесь мы добавили переменную и присвоили ей значение true. Используя оператор if, мы можем скрыть / показать отображаемый контент.
пример
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true; //variable is set to true
}
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable">Condition is valid.</span>
<!--over here based on if condition the text condition is valid is displayed.
If the value of isavailable is set to false it will not display the text.-->
</div>
Выход
Давайте попробуем приведенный выше пример, используя IF THEN ELSE состояние.
пример
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = false;
}
В этом случае мы сделали isavailableпеременная как ложная. Чтобы распечататьelse условие, нам нужно будет создать ng-template следующим образом -
<ng-template #condition1>Condition is invalid</ng-template>
Полный код выглядит так -
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>
</div>
If используется с условием else, а используемая переменная - condition1. То же присваивается какid к ng-template, а когда для доступной переменной установлено значение false, текст Condition is invalid отображается.
На следующем снимке экрана показано отображение в браузере.
Давайте теперь воспользуемся if then else состояние.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
}
Теперь сделаем переменную isavailableкак правда. В html условие записывается следующим образом -
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; then condition1 else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
</div>
Если переменная истинна, то condition1, иначе condition2. Теперь два шаблона созданы с идентификатором#condition1 а также #condition2.
Дисплей в браузере выглядит следующим образом -