Angular8 数据绑定
数据绑定处理如何将你的数据从组件绑定到 HTML DOM 元素(模板)。我们可以轻松地与应用程序交互,而无需担心如何插入您的数据。我们可以通过两种不同的方式建立连接,一种方式和两种方式绑定。
在进入这个主题之前,让我们在 Angular 8 中创建一个组件。
打开命令提示符并使用以下命令创建新的 Angular 应用程序-
cd /go/to/workspace
ng new databind-app
cd databind-app
使用 Angular CLI 创建一个
test 组件,如下所述-
ng generate component test
上面创建了一个新的组件,输出如下-
CREATE src/app/test/test.component.scss (0 bytes) CREATE src/app/test/test.component.html (19 bytes) CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes) UPDATE src/app/app.module.ts (545 bytes)
使用以下命令运行应用程序-
单向数据绑定
单向数据绑定 是组件与其模板之间的单向交互。如果您在组件中执行任何更改,那么它将反映 HTML 元素。它支持以下类型-
字符串插值
一般来说,
字符串插值 是格式化或操作字符串的过程。在 Angular 中,
Interpolation 用于显示从组件到视图 (DOM) 的数据。它由 {{ }} 的表达式表示,也称为 mustache 语法。
让我们在组件中创建一个简单的字符串属性并将数据绑定到视图。
在
test.component.ts 文件中添加以下代码如下-
export class TestComponent implements OnInit {
appName = "My first app in Angular 8" ;
}
移至 test.component.html 文件并添加以下代码-
通过替换现有内容在
app.component.html 文件中添加测试组件,如下所示-
最后,使用以下命令启动您的应用程序(如果尚未完成)-
您可以在屏幕上看到以下输出-
事件绑定
事件是鼠标单击、双击、悬停或任何键盘和鼠标操作等操作。如果用户与应用程序交互并执行某些操作,则会引发事件。它由括号
() 或
on- 表示。我们有不同的方式将事件绑定到 DOM 元素。让我们一一了解。
查看绑定的组件
让我们了解简单的按钮点击偶数处理是如何工作的。
在
test.component.ts 文件中添加以下代码如下-
export class TestComponent {
showData($event: any){
console.log ("button is clicked!" ); if($event) {
console.log ($event.target);
console.log ($event.target.value);
}
}
}
$event\ast\:refersthefiredevent\cdot\:Inthisscenario\:,\ast\:click \ast\:istheevent\cdot\ast$event 包含有关事件和目标元素的所有信息。在这里,目标是按钮。 $event.target 属性将包含目标信息。
我们有两种方法可以调用组件方法来查看
(test.component.html) 。第一个定义如下-
<h2>Event Binding</h2>
<button (click)="showData($event)" >Click here</button>
或者,您可以使用
prefix-on 使用规范形式,如下所示-
<button on-click = "showData()" >Click here</button>
这里,我们没有使用
$event ,因为它是可选的。
最后,使用以下命令启动您的应用程序(如果尚未完成)-
现在,运行您的应用程序,您可以看到以下响应-
这里,当用户点击按钮时,事件绑定理解为按钮点击动作并调用组件的 showData() 方法,因此我们可以断定它是单向绑定。
属性绑定
Property binding 用于将组件属性的数据绑定到 DOM 元素。用
[] 表示。
让我们通过一个简单的例子来理解。
在
test.component.ts 文件中添加以下代码。
export class TestComponent {
userName:string = "Peter" ;
}
在视图 test.component.html 中添加以下更改,
<input type="text" [value]="userName" >
这里,
userName 属性绑定到 DOM 元素
标签的属性。
最后,使用以下命令启动您的应用程序(如果尚未完成)-
属性绑定
属性绑定 用于将组件的数据绑定到 HTML 属性。语法如下-
<HTMLTag [attr.ATTR]="Component data" >
例如
<td [attr.colspan]="columnSpan" > ... </td>
让我们通过一个简单的例子来理解。
在
test.component.ts 文件中添加以下代码。
export class TestComponent {
userName:string = "Peter" ;
}
在视图中添加以下更改
test.component.html,
<input type="text" [value]="userName" >
这里,
userName 属性绑定到 DOM 元素
标签的属性。
最后,使用以下命令启动您的应用程序(如果尚未完成)-
类绑定
类绑定 用于将组件中的数据绑定到 HTML 类属性。语法如下-
<HTMLTag [class]="component variable holding class name" >
类绑定 提供了额外的功能。如果组件数据是布尔值,则该类仅在为真时才会绑定。可以通过字符串("foo bar")以及字符串数组提供多个类。还有更多选项可用。
例如
让我们通过一个简单的例子来理解。
在 test.component.ts 文件中添加以下代码,
export class TestComponent {
myCSSclass = "red" ;
applyCSSclass = false ;
}
在视图
test.component.html 中添加以下更改。
<p [class]="myCSSClass" >this paragraph class comes from *myClass* property </p>
<p [class.blue]="applyCSSClass" >this paragraph class does not apply</p>
在 test.component.css 中添加以下内容。
.red {
color: red;
}
.blue {
color: blue;
}
最后,使用以下命令启动您的应用程序(如果尚未完成)-
最终输出如下所示-
样式绑定
样式绑定 用于将组件中的数据绑定到 HTML 样式属性中。语法如下-
<HTMLTag [style.STYLE]="component data" >
例如
<p [style.color]="myParaColor" > ... </p>
让我们通过一个简单的例子来理解。
在
test.component.ts 文件中添加以下代码。
在视图
test.component.html 中添加以下更改。
<p [style.color]="myColor" >Text color is styled using style binding</p>
最后,使用以下命令启动您的应用程序(如果尚未完成)-
最终输出如下所示-
双向数据绑定
双向数据绑定 是双向交互,数据以双向方式流动(从组件到视图,从视图到组件)。简单的例子是
ngModel 。如果您对您的属性(或模型)进行任何更改,它会反映在您的视图中,反之亦然。它是属性和事件绑定的结合。
NgModel
NgModel 是一个独立的指令。
ngModel 指令将表单控件绑定到属性,将属性绑定到表单控件。
ngModel 的语法如下-
<HTML [(ngModel)]="model.name" />
例如
<input type="text" [(ngModel)]="model.name" />
让我们尝试在我们的测试应用程序中使用
ngModel 。
在
AppModule (src/app/app.module.ts)
中配置
FormsModule
import { FormsModule } from '@angular/forms' ; @NgModule({
imports: [
BrowserModule,
FormsModule
]
})
export class AppModule { }
FormModule 进行必要的设置以启用双向数据绑定。
更新
TestComponent 视图
(test.component.html) 如下所述-
<input type="text" [(ngModel)]="userName" />
<p>Two way binding! Hello {{ userName }}!</p>
这里,
属性绑定到表单控件
ngModel 指令,如果您在文本框中输入任何文本,它将绑定到该属性。运行您的应用程序后,您可以看到以下更改-
最后,使用以下命令启动您的应用程序(如果尚未完成)-
现在,运行您的应用程序,您可以看到以下响应-
现在,尝试将输入值更改为
Jack 。当您输入时,输入下方的文本会发生变化,最终输出将如下所示-
我们将在接下来的章节中了解有关表单控件的更多信息。
工作示例
让我们在
ExpenseManager 应用程序中实现本章中学到的所有概念。
打开命令提示符并转到项目根文件夹。
cd /go/to/expense-manager
创建 ExpenseEntry 接口(src/app/expense-entry.ts)并添加 id、金额、类别、位置、支出和 createdOn。
export interface ExpenseEntry {
id: number;
item: string;
amount: number;
category: string;
location: string;
spendOn: Date;
createdOn: Date;
}
将
ExpenseEntry 导入
ExpenseEntryComponent 。
import { ExpenseEntry } from '../expense-entry' ;
创建一个
ExpenseEntry 对象,
expenseEntry 如下图所示-
export class ExpenseEntryComponent implements OnInit {
title: string;
expenseEntry: ExpenseEntry;
constructor() { }
ngOnInit() {
this .title = "Expense Entry" ;
this .expenseEntry = {
id: 1,
item: "Pizza" ,
amount: 21,
category: "Food" ,
location: "Zomato" ,
spendOn: new Date(2020, 6, 1, 10, 10, 10), createdOn: new Date(2020, 6, 1, 10, 10, 10),
};
}
}
使用
expenseEntry 对象更新组件模板,
src/app/expense-entry/expense-entry.component.html 如下所述-
<!--Page Content-->
<div class="container" >
<div class="row" >
<div class="col-lg-12 text-center" style="padding-top: 20px;" >
<div class="container" style="padding-left: 0px; padding-right: 0px;" >
<div class="row">
<div class="col-sm" style="text-align: left;" >
{{ title }}
</div>
<div class="col-sm" style="text-align: right;" >
<button type="button" class="btn btn-primary" >Edit</button>
</div>
</div>
</div>
<div class="container box" style="margin-top: 10px;" >
<div class="row">
<div class="col-2" style="text-align: right;">
<strong><em>Item:</em></strong>
</div>
<div class="col" style="text-align: left;">
{{ expenseEntry.item }}
</div>
</div>
<div class="row">
<div class="col-2" style="text-align: right;">
<strong><em>Amount:</em></strong>
</div>
<div class="col" style="text-align: left;">
{{ expenseEntry.amount }}
</div>
</div>
<div class="row">
<div class="col-2" style="text-align: right;">
<strong><em>Category:</em></strong>
</div>
<div class="col" style="text-align: left;">
{{ expenseEntry.category }}
</div>
</div>
<div class="row">
<div class="col-2" style="text-align: right;">
<strong><em>Location:</em></strong>
</div>
<div class="col" style="text-align: left;">
{{ expenseEntry.location }}
</div>
</div>
<div class="row">
<div class="col-2" style="text-align: right;">
<strong><em>Spend On:</em></strong>
</div>
<div class="col" style="text-align: left;">
{{ expenseEntry.spendOn }}
</div>
</div>
</div>
</div>
</div>
</div>