Angular 8 - 数据绑定

数据绑定涉及如何将组件中的数据绑定到 HTML DOM 元素（模板）。我们可以轻松地与应用程序交互，而不必担心如何插入数据。我们可以通过两种不同的方式建立连接：一种是单向绑定，另一种是双向绑定。

在进入本主题之前，我们先在 Angular 8 中创建一个组件。

打开命令提示符并使用以下命令创建新的 Angular 应用程序 -

cd /go/to/workspace 
ng new databind-app 
cd databind-app

使用 Angular CLI创建一个测试组件，如下所述 -

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)

使用以下命令运行应用程序 -

ng serve

单向数据绑定

单向数据绑定是组件与其模板之间的单向交互。如果您在组件中执行任何更改，它将反映 HTML 元素。它支持以下类型 -

字符串插值

一般来说，字符串插值是格式化或操作字符串的过程。在 Angular 中，插值用于将数据从组件显示到视图 (DOM)。它由表达式 {{ }} 表示，也称为小胡子语法。

让我们在组件中创建一个简单的字符串属性并将数据绑定到视图。

在test.component.ts文件中添加以下代码，如下所示 -

export class TestComponent implements OnInit { 
   appName = "My first app in Angular 8"; 
}

移至 test.component.html 文件并添加以下代码 -

<h1>{{appName}}</h1>

通过替换现有内容在app.component.html文件中添加测试组件，如下所示 -

<app-test></app-test>

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve

您可以在屏幕上看到以下输出 -

字符串插值

事件绑定

事件是指鼠标单击、双击、悬停或任何键盘和鼠标操作等操作。如果用户与应用程序交互并执行某些操作，则会引发事件。它由括号()或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\:指的是firedevent\cdot\:在此场景中\:,\ast\:单击\ast\:是事件\cdot\ast$event 拥有有关事件和目标元素的所有信息。这里，目标是按钮。$event.target 属性将包含目标信息。

我们有两种方法来调用组件方法来查看（test.component.html）。第一个定义如下 -

<h2>Event Binding</h2> 
<button (click)="showData($event)">Click here</button>

或者，您可以在使用规范形式时使用前缀 - ，如下所示 -

<button on-click = "showData()">Click here</button>

在这里，我们没有使用$event，因为它是可选的。

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve

现在，运行您的应用程序，您可以看到以下响应 -

典范

在这里，当用户单击按钮时，事件绑定理解按钮单击操作并调用组件 showData() 方法，因此我们可以断定它是单向绑定。

属性绑定

属性绑定用于将组件属性中的数据绑定到 DOM 元素。它由[]表示。

让我们通过一个简单的例子来理解。

在test.component.ts文件中添加以下代码。

export class TestComponent { 
   userName:string = "Peter"; 
}

在视图 test.component.html 中添加以下更改，

<input type="text" [value]="userName">

这里，

userName属性绑定到 DOM 元素<input>标记的属性。

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve
属性绑定

属性绑定

属性绑定用于将组件中的数据绑定到 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 元素 <input> 标记的属性。

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve
属性绑定

类绑定

类绑定用于将组件中的数据绑定到 HTML 类属性。语法如下 -

<HTMLTag [class]="component variable holding class name">

类绑定提供了附加功能。如果组件数据是布尔值，则仅当它为 true 时该类才会绑定。多个类可以通过字符串（“foo bar”）以及字符串数组提供。还有更多选项可供选择。

例如，

<p [class]="myClasses">

让我们通过一个简单的例子来理解。

在 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; 
}

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve

最终输出如下所示 -

类绑定

风格装订

样式绑定用于将组件中的数据绑定到 HTML 样式属性中。语法如下 -

<HTMLTag [style.STYLE]="component data">

例如，

<p [style.color]="myParaColor"> ... </p>

让我们通过一个简单的例子来理解。

在test.component.ts文件中添加以下代码。

myColor = 'brown';

在视图test.component.html中添加以下更改。

<p [style.color]="myColor">Text color is styled using style binding</p>

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve

最终输出如下所示 -

风格装订

双向数据绑定

双向数据绑定是双向交互，数据以两种方式流动（从组件到视图以及视图到组件）。简单的例子是ngModel。如果您对属性（或模型）进行任何更改，它会反映在您的视图中，反之亦然。它是属性和事件绑定的组合。

NG模型

NgModel是一个独立的指令。ngModel指令将表单控件绑定到属性，并将属性绑定到表单控件。ngModel的语法如下 -

<HTML [(ngModel)]="model.name" />

例如，

<input type="text" [(ngModel)]="model.name" />

让我们尝试在我们的测试应用程序中使用ngModel。

在AppModule中配置FormsModule (src/app/app.module.ts)

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指令，如果您在文本框中输入任何文本，它将绑定到该属性。运行应用程序后，您可以看到以下变化 -

最后，使用以下命令启动您的应用程序（如果尚未完成） -

ng serve

现在，运行您的应用程序，您可以看到以下响应 -

数据绑定方式

现在，尝试将输入值更改为Jack。当您键入时，输入下方的文本会发生变化，最终输出将如下所示 -

双向数据绑定

我们将在接下来的章节中了解有关表单控件的更多信息。

工作示例

让我们在ExpenseManager应用程序中实现本章学到的所有概念。

打开命令提示符并转到项目根文件夹。

cd /go/to/expense-manager

创建 ExpenseEntry 接口 (src/app/expense-entry.ts) 并添加 id、amount、category、Location、spendOn 和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>
NG模型