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.

Дисплей в браузере выглядит следующим образом -