Angular 8 - 数据绑定

数据绑定涉及如何将组件中的数据绑定到 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)

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

ng serve

单向数据绑定

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

字符串插值

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

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

在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

You could see the following output on your screen −

事件绑定

事件是指鼠标单击、双击、悬停或任何键盘和鼠标操作等操作。如果用户与应用程序交互并执行某些操作，则会引发事件。它由括号() 或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>

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

<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>

Angular 8 教程

Angular 8 - 数据绑定

单向数据绑定

字符串插值

事件绑定

查看绑定的组件

属性绑定

属性绑定

类绑定

样式绑定

双向数据绑定

NG模型

工作示例

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！