Angular2 - 数据绑定
5.00/5 (8投票s)
Angular2 中的数据绑定
什么是数据绑定？
数据绑定是 Angular2 用于在 UI 上显示数据并接收用户输入的一种机制。因此，组件（ts 文件中的类）的逻辑可以更轻松地与 UI（HTML/模板文件）交互。
好的，你能展示一下如何在 UI 上显示数据吗？
查看 users.html 文件，其中有一个循环语句，循环遍历数据集合并将其打印到浏览器中
<tr *ngFor="let user of users">
<th scope="row">{{user.id}}</th>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.userName}}</td>
<td>
<a title=""><i class="fa fa-edit"></i></a>
</td>
</tr>
在此代码中，我们使用 {{user.userName}} 来显示 userName 的值到 UI，这就是单向数据绑定。
Angular2 中可以使用多少种类型的数据绑定？
主要使用了 3 种类型，它们是：
- 单向绑定：仅用于在 UI 上显示数据。
- 双向绑定：用于在 UI 上显示数据并接收来自 UI 的修改后的数据。
- 事件绑定
你能更详细地解释一下单向绑定吗？
在单向绑定中，我们主要将其用于将数据显示到 UI。
我们使用 "{{变量名}}" 模式来实现这一点。
例如，在上面的示例中，在 users.html 文件中，我们使用 "{{user.firstName}}" 模式显示用户的 firstName。
还有其他方法可以在 UI 上显示数据（单向绑定）吗？
除了使用 "{{}}" 之外，我们还可以使用 "[属性名]='值'" 模式。
在下面的示例中，我将其更改为
<td>{{user.firstName}}</td>
to
<td [innerText]="user.firstName"></td>
浏览器中的输出相同
仔细查看生成的 HTML，我们有
我们看到 "First Name" 的生成 HTML 与 "User Name" (和其他) 的 HTML 不同。
在某些情况下，我们可以使用这种方式并更新生成的元素的其他属性，如下所示：
<td [style.backgroundColor]="user.color" [innerText]="user.firstName"></td>
这将把 UI 更改为
我们有两种使用单向绑定方式，我应该使用哪一种？
每种类型的绑定都有其自身的用途。
对于第一种类型的绑定，我们应该用于以下情况：
<img src="http://tranthanhtu.vn{{user.avatar}}" />
我们也可以使用第二种类型的绑定来做到这一点。但它更复杂。
对于第二种类型的绑定，我们应该用于以下情况：
<td [style.backgroundColor]="user.color"></td>
对于这些情况，我们无法使用第一种方式实现。
双向绑定呢？
我们使用双向绑定来在 UI 上显示数据并接收用户输入。
如下面的示例所示，我们将显示所选用户的摘要。所选用户的名字和姓氏可以编辑。这些更改将立即更新。
在 users.html 中，在“edit”图标下方添加以下 HTML：
<a title="" (click)="onPreviewClicked(user)">
<i class="fa fa-eye-slash"></i></a>
在 Users 类中（在 users.ts 中），我们有：
export class Users {
public currentSelected: any = null;
public onPreviewClicked(user: any) {
this.currentSelected = user;
}
}
我们还在 users.html 中的当前表格下方添加以下 HTML：
<div *ngIf="currentSelected">
<h3>Summary of {{currentSelected.firstName}}</h3>
<form class="form-horizontal form-label-left">
<div class="form-group">
<label>First Name</label>
<input class="form-control"
[(ngModel)]="currentSelected.firstName" name="first" />
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control"
[(ngModel)]="currentSelected.lastName" name="last" />
</div>
</form>
</div>
当您单击“Preview”图标时，“First name”和“Last name”将显示所选用户的。
您的更改将自动更新
总而言之，我们使用 [(ngModel)]="currentSelected.firstName" 来在 UI 和组件逻辑之间进行双向数据绑定。
事件绑定呢？
在上面的示例中，我们将 (click) 事件绑定到组件中的 "onPreviewClicked" 方法。
我们使用此格式 (click)="onPreviewClicked(user)" 来绑定事件，如下所示：
<a title="" (click)="onPreviewClicked(user)">
<i class="fa fa-eye-slash"></i></a>
好的，我明白了，你能帮我总结一下 Angular 中的绑定吗？
我们有 3 种类型的绑定：
- 单向绑定：用于将数据显示到 UI
- 双向绑定：用于将数据显示到 UI 和用户输入
- 事件绑定：用于绑定指定的事件，例如：(click), ....
感谢您的阅读。