开发学院,分享开发教程和最新动态

Angular 8 教程: 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

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

string_interpolation.jpg

事件绑定

  事件是诸如鼠标点击、双击、悬停或任何键盘和鼠标动作的动作。如果用户与应用程序交互并执行某些操作,则会引发事件。它由括号()或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.target属性将包含目标信息。

  我们有两种方法可以调用组件方法来查看(test.component.html)。第一个定义如下

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

  或者,您可以使用规范形式的前缀on,如下所示

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

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

  最后,使用下面的命令启动应用程序(如果还没有完成)

ng serve

  现在,运行您的应用程序,您可以看到下面的响应:

canonical.jpg

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

属性绑定

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

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

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

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

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

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

  在这里,userName属性绑定到DOM元素< input >标签属性。

  最后,使用下面的命令启动应用程序(如果还没有完成)

ng serve

property_binding.jpg

HTML属性绑定

  HTML属性绑定用于将组件中的数据绑定到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

attribute_binding.jpg

类绑定

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

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

  类绑定提供了额外的功能。如果组件数据是布尔型的,那么类只有在为真时才会绑定。多个类可以由字符串("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

  最终输出如下所示

class_binding.jpg

样式绑定

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


  例如

<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

  最终输出如下所示:

style_binding.jpg

双向数据绑定

  双向数据绑定是双向交互,数据双向流动(从组件到视图和视图到组件)。简单的例子是ngModel。如果你对你的属性(或模型)做了任何改变,它会反映在你的视图中,反之亦然。它是属性和事件绑定的组合。

NgModel

  NgModel是一个独立的指令。ngModel指令将窗体控件绑定到属性,并将属性绑定到窗体控件。ngModel的语法如下:

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

  例如,

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

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

  在app module(src/app/app.module.ts)中配置表单模块

import { FormsModule } from '@angular/forms'; @NgModule({ 
   imports: [ 
      BrowserModule, 
      FormsModule
   ] 
}) 
export class AppModule { }

  FormModule进行必要的设置以启用双向数据绑定。

  如下所述更新测试组件视图(test.component.html)

<input type="text" [(ngModel)]="userName" />
<p>Two way binding! Hello {{ userName }}!</p>

  在这里,属性被绑定到窗体控件“模型指令”,如果在文本框中输入任何文本,它将绑定到属性。运行应用程序后,您可以看到以下变化

  最后,使用下面的命令启动应用程序(如果还没有完成)

ng serve

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

way_data_binding.jpg

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

two_way_data_binding.jpg

  在接下来的章节中,我们将学习更多关于表单控件的知识。

工作示例

  让我们在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导入ExpenseEntry组件。

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>

ngmodel.jpg