{% raw %} # Angular 插值 > 原文： [https://howtodoinjava.com/angular/angular-interpolation/](https://howtodoinjava.com/angular/angular-interpolation/) ## 1\. 什么是 Angular 插值？ **[Angular](https://howtodoinjava.com/angular/dev-workspace-setup/) 插值**用于在具有雙花括號語法的各個視圖[模板](https://howtodoinjava.com/angular/angular-templates-and-views/)中顯示[組件](https://howtodoinjava.com/angular/angular-component/)屬性。 我們可以在視圖中顯示所有類型的屬性數據[字符串](https://howtodoinjava.com/typescript/string-literal-types/)，數字，日期，[數組](https://howtodoinjava.com/typescript/arrays/)，列表或[映射](https://howtodoinjava.com/typescript/maps/)。 數據綁定由*單向數據綁定*和*雙向數據綁定*組成。 插值用于**單向數據綁定**。 插值會將數據從我們的組件向 HTML 元素沿一個方向移動。 ## 2\. Angular 插值語法 在視圖模板中顯示的屬性名稱應括在*雙花括號*中，也稱為**胡子語法**。 即： ```java class AppComponent { propertyName: string; object: DomainObject; } {{ propertyName }} {{ object.propertyName }} ``` Angular 會自動從組件中提取`propertyName`和`object.propertyName`的值，并將這些值插入瀏覽器。 這些屬性更改時，Angular 會更新顯示。 ## 3\. Angular 插值用法 1. **顯示簡單屬性** – 插值可用于顯示和求值 HTML 元素標簽之間以及屬性分配內的文本字符串。 ```java <h1>Greetings {{ name }}! </h1> <h4><img src="{{ backgroundImgUrl }}" style="height:40px"></h4> ``` 2. **求值算術表達式** – 插值的另一種用法是求值花括號內的算術表達式。 ```java <h6>{{3 + 5}}</h6> //outputs 8 on HTML browser ``` 3. **調用方法并顯示返回值** – 我們還可以在插值表達式內的宿主組件視圖上調用/調用方法。 ```java import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-greet', template: ` <h1>Greetings {{ name }}! </h1> <h2>Have a good {{ getTime() }}!</h2> `, styleUrls: ['./greet.component.css'] }) export class GreetComponent implements OnInit { name: string = "John Doe"; getTime(): string { return 'morning'; } } ``` 4. **顯示數組項** – 我們可以將插值與`ngFor`指令一起使用以顯示數組項。 ```java export class DomainObject { constructor(public id: number, public name: string) { //code } } ``` ```java import { DomainObject } from './domain'; @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>The name is : {{domainObjectItem.name}}</h2> <p>Data Items:</p> <ul> <li *ngFor="let d of domainObjects"> {{ d.name }} </li> </ul> ` }) export class AppComponent { title = 'App Title'; domainObjects = [ new DomainObject(1, 'A'), new DomainObject(2, 'B'), new DomainObject(3, 'C'), new DomainObject(4, 'D') ]; domainObjectItem = this.domainObjects[0]; } ``` > 我們使用內聯模板或單獨的 HTML 文件進行組件視圖，模板數據綁定都具有對組件屬性的相同訪問權限。 ## 4\. Angular 插值示例 通過以下命令，使用`@angular/cli`創建一個新組件。 ```java //with inline template using '-it' flag ng generate component greet -it ``` 上面的命令將使用內聯模板生成“`greet.component.ts`”。 讓我們將屬性`name`和`time`添加到問候組件中，如下所示： ```java import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-greet', template: ` <h1>Greetings {{name}}! </h1> <h2>Have a good {{time}}!</h2> `, styleUrls: ['./greet.component.css'] }) export class GreetComponent implements OnInit { name: string = "John Doe"; time: string = "morning"; } ``` Angular 會自動從“問候”組件中提取`name`和`time`屬性的值，并將這些值插入瀏覽器。 這些屬性更改時，Angular 會更新顯示。 ## 5\. 插值和屬性綁定之間的區別 插值是 Angular 轉換為屬性綁定（一對方括號）的一種特殊語法。 這是屬性綁定的便捷替代方法。 另一個主要區別是，要將元素屬性設置為**非字符串數據值**，我們必須使用屬性綁定。 在此示例中，將基于`'isDisabled'`的值禁用或啟用`OK`按鈕。 另一方面，無論屬性值如何，`Cancel`按鈕將始終被禁用。 ```java export class AppComponent { isDisabled: boolean = true; } <button [disabled]='isDisabled'>OK</button> //Data binding <button disabled='{{isDisabled}}'>Cancel</button> //Interpolation ``` 學習愉快！ {% endraw %}