Вступление
В этой статье мы узнаем о привязке данных в Angular. Как мы знаем, привязка данных используется для привязки данных из представления в компонент или из компонента в представление.
Одностороннее связывание данных
При односторонней привязке данных у нас есть разные способы привязки данных из нашего файла класса Component.ts к нашему файлу Component.html :
- Строковая интерполяция.
- Привязка недвижимости.
- Стиль Binding.
- Класс Binding.
- Привязка атрибутов.
Чтобы передать данные из нашего файла Component.html (View) в наш класс Component.ts , мы используем привязку событий.
Строковая интерполяция
В Струнной Интерполяции мы связываем данные из Component.ts файла класса в Component.html файл, используя выражение в двойных фигурных скобках. Если мы не передаем данные или поле компонента в двойных фигурных скобках, то Angular обрабатывает это как строковое значение и отображает строковое значение для конечного пользователя.
Откройте файл Component.ts и добавьте следующий код:
Машинопись
1
export class Test3Component implements OnInit {
2
firstName: string = 'Khaja';
3
lastName: string = 'Moizuddin';
4
number1: number = 100;
5
number2: number = 200;
6
totalAmount: number = this.number1 + this.number2;
7
fullName: string = this.firstName + this.lastName;
8
fullNameVal:string;
9
totalVal:number;
10
csharpCornerURL: string = 'https://www.c-sharpcorner.com/members/khaja-moiz';
11
myImagePath: string = 'assets/Images/mvp1.jpg';
12
heightImg: number = 50;
13
widthImg:number = 50;
14
onButtonClick: string;
15
onDoubleClick: string;
16
17
getTotalAmount1() {
18
return this.number1 + this.number2;
19
}
20
getTotalAmount2() {
21
return this.totalVal = this.number1 + this.number2;
22
}
23
getTotalAmount3() {
24
return this.totalVal = this.totalAmount;
25
}
26
getFullName1() {
27
return this.firstName + this.lastName;
28
}
29
getFullName2() {
30
return this.fullNameVal = this.firstName + this.lastName;
31
}
32
getFullName3() {
33
return this.fullNameVal = this.fullName;
34
}
35
onBtnClick() {
36
return this.onButtonClick = 'Welcome ' + this.firstName;
37
}
38
onDblClick(){
39
return this.onDoubleClick = 'Welcome ' + this.lastName;
40
}
41
constructor() { }
42
ngOnInit() {
43
}
44
}
Теперь откройте файл Component.html и добавьте следующий код:
Машинопись
xxxxxxxxxx
1
<h2>STRING INTERPOLATION</h2>
2
<hr>
3
<h3> firstName is:{{this.firstName}} </h3>
4
<h3> lastName is: {{this.lastName}} </h3>
5
<h3> fullName is:{{this.fullName}} </h3>
6
<h3> fullName1 is:{{this.getFullName1()}} </h3>
7
<h3> fullName2 is:{{this.getFullName2()}} </h3>
8
<h3> fullName3 is:{{this.getFullName3()}} </h3>
9
<h3> Number1 is : {{this.number1}} </h3>
10
<h3> Number2 is:{{this.number2}} </h3>
11
<h3> TotalAmount is:{{this.totalAmount}} </h3>
12
<h3> TotalAmount1 is:{{this.getTotalAmount1()}} </h3>
13
<h3> TotalAmount2 is:{{this.getTotalAmount2()}} </h3>
14
<h3>TotalAmount3 is: {{this.getTotalAmount3()}} </h3>
В приведенном выше коде мы использовали двойные фигурные скобки для привязки данных из класса Component.ts к нашему файлу Component.html ; при этом он преобразует значения поля как выражение.
Вам также может понравиться:
Angular Data Binding для разработчиков .NET .
Выражения:
Джава
xxxxxxxxxx
1
fullName: string = this.firstName + this.lastName; or totalAmount: number = this.number1 + this.number2;
преобразует значения в виде выражения и возвращает результат конечному пользователю.
Привязка недвижимости
В собственности связывания, мы связываем данные из нашего Component.ts класса к Component.html файла. Свойство HTML elements связывается со значениями из файла Component.ts в квадратных скобках [].
Теперь откройте файл Component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
<span [innerText]='this.firstName'></span><br>
2
<span [innerHTML] = 'this.lastName'></span><br>
3
<span innerText = '{{this.firstName}}'></span><br>
4
<span innerHTML = '{{this.lastName}}'></span>
В приведенном выше коде мы использовали [innerHTML]и [innerText], что является ничем иным, как привязкой свойства. Здесь значения this.firstName, this.lastName которые связаны с Component.ts файла. Вывод будет виден конечному пользователю и помещен между spanтегами.
HTML
xxxxxxxxxx
1
<!--BINDING PROPERTY TO DOM ELEMENT-->
2
<span [attr.innerText]='this.firstName'></span><br>
3
<span [attr.innerHTML] = 'this.lastName'></span><br>
4
<span attr.innerText = '{{this.firstName}}'></span><br>
5
<span attr.innerHTML = '{{this.lastName}}'></span>
В приведенном выше коде мы использовали attrатрибут, который является ничем иным, как связыванием атрибута с именем свойства, которое связывает значение компонента с элементом DOM. Выход не будет виден конечным пользователю, но innerTextи innerHTMLсвойства будут добавлены в spanтег, которые могут быть представленными ниже.
HTML
xxxxxxxxxx
1
<a href="{{this.csharpCornerURL}}" target="_blank">CsharpCorner</a><br>
2
<a [href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>
3
<$$anonymous$$ttr.href = '{{this.csharpCornerURL}}' target="_blank">CsharpCorner</a><br>
4
<a [attr.href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>
5
<img src='{{this.myImagePath}}' height='{{this.heightImg}}' width="{{this.widthImg}}" /><br>
6
<img [src]='this.myImagePath' [height]='this.heightImg' [width]="this.widthImg"><br>
7
<img attr.src = '{{this.myImagePath}}' attr.height='{{this.heightImg}}' attr.width="{{this.widthImg}}"><br>
8
<img [attr.src]='this.myImagePath' [attr.height]='this.heightImg' [attr.width]="this.widthImg">
Здесь, я использовал различные способы привязки значения компоненты к hrefи srcсвойствам, как показано в приведенном выше коды.
Привязка стиля
Используя привязку стиля, мы можем установить стиль, используя [ngStyle]атрибут, передав значение в Component.tsфайл. Здесь я собираюсь установить [ngStyle]атрибут с цветом фона со следующими условиями: если условие выполнено успешно, я собираюсь отобразить цвет фона как зеленый, а если условие не выполнено, то я собираюсь отобразить цвет фона как красный.
Откройте файл Component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
<h2>NG STYLE WITH TRUE CONDITION</h2>
2
<h3 [ngStyle]="{'background-color': this.fullName == this.getFullName1()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
3
<h3 [ngStyle] = "{'background-color': this.getFullName1() == this.getFullName2()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
4
<h3 [ngStyle] = "{'background-color': this.getFullName3() == this.firstName + this.lastName ?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
5
<h3 [ngStyle] = "{'background-color': this.totalAmount == this.getTotalAmount1() ?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
6
<h3 [ngStyle] = "{'background-color': this.getTotalAmount2() == this.getTotalAmount3()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
7
<h3 [ngStyle] = "{'background-color': this.getTotalAmount3() == this.number1 + this.number2?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
8
<h2>NG STYLE WITH FALSE CONDITION</h2>
9
<h3 [ngStyle]="{'background-color': this.fullName != this.getFullName1()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
10
<h3 [ngStyle] = "{'background-color': this.getFullName1() != this.getFullName2()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
11
<h3 [ngStyle] = "{'background-color': this.getFullName3() != this.firstName + this.lastName ?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
12
<h3 [ngStyle] = "{'background-color': this.totalAmount != this.getTotalAmount1() ?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
13
<h3 [ngStyle] = "{'background-color': this.getTotalAmount2() != this.getTotalAmount3()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
14
<h3 [ngStyle] = "{'background-color': this.getTotalAmount3() != this.number1 + this.number2?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
Связывание классов
Используя привязку классов, мы можем установить ngClassатрибут. С помощью [ngClass]атрибута мы можем установить свойство class элемента HTML и установить CSS для примененного значения для [ngClass] атрибута.
Откройте файл Component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
NG CLASS EXAMPLE1: <input type="text" [ngClass]= 'this.fullName' [id]='this.firstName' [name]='this.lastName'/><br>
2
NG CLASS EXAMPLE1: <input type="text" ngClass= '{{this.fullName}}' id='{{this.firstName}}' name='{{this.lastName}}'/><br><br>
3
NG CLASS EXAMPLE2: <input type="text" [attr.ngClass]= 'this.fullName' [attr.id]='this.firstName' [attr.name]='this.lastName'/><br>
4
NG CLASS EXAMPLE2: <input type="text" attr.ngClass= '{{this.fullName}}' attr.id='{{this.firstName}}' attr.name='{{this.lastName}}'/><br><br>
5
CLASS EXAMPLE3: <input type="text" [class]= 'this.fullName' [id]='this.firstName' [name]='this.lastName'/><br>
6
CLASS EXAMPLE3: <input type="text" class= '{{this.fullName}}' id='{{this.firstName}}' name='{{this.lastName}}'/><br><br>
Приведенные выше примеры — это односторонняя привязка данных из файла класса Component.ts к файлу Component.html или представлению.
Привязка событий
Это один конец связывания данных, который связывающее значение из Component.html файла в Component.ts файл класса, или с видом на компонент.
Откройте файл Component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
<h2>EVENT BINDING</h2>
2
<hr>
3
<input type="button" (click)=onBtnClick() value="CLICK" height="20" width="20">
4
<h3>{{this.onButtonClick}}</h3>
5
<input type="button" (dblclick)=onDblClick() value="DOUBLE CLICK" height="20" width="20">
6
<h3>{{this.onDoubleClick}}</h3>
При этом, когда пользователь нажимает или двойной щелчок на кнопке в окне просмотра, мы устанавливаем значение this.onButtonClickи this.onDoubleClickв onBtnClick()и onDblClick()методы и отображения результата или сообщение для конечного пользователя ниже Нажмите и сделайте двойной щелчок кнопки.
Двухстороннее связывание данных
В двухсторонним связывания данных, данные могут быть связаны с Component.html файла в Component.ts класса или из Component.ts класса в файл Component.html.
Если значение текстового поля в представлении изменяется, то значение Component.ts также отражается; аналогично, если мы изменим значение Component.ts , то значение текстового поля будет отражено.
При двусторонней привязке данных мы используем [(ngModel)]атрибут. Нам также необходимо импортировать FormsModuleв app.Module.ts файл , например так:
Машинопись
xxxxxxxxxx
1
import {FormsModule} from '@angular/forms';
и добавьте FormsModuleв importsмассив.
JSON
xxxxxxxxxx
1
imports: [
2
BrowserModule,
3
AppRoutingModule,
4
FormsModule
5
],
Откройте файл Component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
Two Way Binding: <input type="text" [(ngModel)]='this.fullName' value="{{this.fullName}}">
2
{{this.fullName}}
При этом, если Textboxзначение изменяется, то поле Component.tsthis.FullName изменяется. Кроме того, если мы изменим this.fullName поле, его новое значение будет отражено в TextBox.