插值 文本綁定 屬性綁定 在布爾特性的情況下，它們的存在即暗示為 ，屬性綁定工作起來略有不同，在這個例子中： 如果 的值是 、`undefined false disabled 元素中。 使用 JavaScript 表達式 編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaS ...
插值
文本綁定
<p>Message: {{ msg }}</p>
<p [innerHTML]="msg"></p>屬性綁定
<!-- 寫法一 -->
<img src="{{ heroImageUrl }}">
<!-- 寫法二，推薦 -->
<img [src]="heroImageUrl">
<!-- 寫法三 -->
<img bind-src="heroImageUrl">在布爾特性的情況下，它們的存在即暗示為 true，屬性綁定工作起來略有不同，在這個例子中：
<button [disabled]="isButtonDisabled">Button</button>如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。
使用 JavaScript 表達式
<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '沒完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>
<p [title]="title.split('').reverse().join('')">{{ title }}</p>
<ul>
<li [id]="'list-' + t.id" *ngFor="let t of todos">
{{ t.title }}
</li>
</ul>編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaScript 表達式也是合法的模板表達式，但不是全部。
Angular 遵循輕邏輯的設計思路，所以在模板引擎中不能編寫非常複雜的 JavaScript 表達式，這裡有一些約定：
- 賦值 (
=,+=,-=, ...) new運算符- 使用
;或,的鏈式表達式 - 自增或自減操作符 (
++和--)
列表渲染
基本用法：
export class AppComponent {
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>也可以獲取 index 索引：
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>條件渲染
NgIf
<p *ngIf="heroes.length > 3">There are many heroes!</p>ngIf 和 <ng-template>
<ng-template [ngIf]="condition"><div>...</div></ng-template>NgSwitch
NgSwitch 的語法比較啰嗦，使用頻率小一些。
<div [ngSwitch]="currentHero.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>
事件處理
事件綁定只需要用圓括弧把事件名包起來即可：
<button (click)="onSave()">Save</button>可以把事件對象傳遞到事件處理函數中：
<button (click)="onSave($event)">On Save</button>也可以傳遞額外的參數（取決於你的業務）：
<button (click)="onSave($event, 123)">On Save</button>當事件處理語句比較簡單的時候，我們可以內聯事件處理語句：
<button (click)="message = '哈哈哈'">內聯事件處理</button>我們可以利用 屬性綁定 + 事件處理 的方式實現表單文本框雙向綁定：
<input [value]="message"
(input)="message=$event.target.value" >事件綁定的另一種寫法，使用 on- 首碼的方式：
<!-- 綁定事件處理函數 -->
<button on-click="onSave()">On Save</button>表單輸入綁定
文本
<p>{{ message }}</p>
<input type="text" [(ngModel)]="message">運行之後你會發現報錯了，原因是使用 ngModel 必須導入 FormsModule 並把它添加到 Angular 模塊的 imports 列表中。
導入 FormsModule 並讓 [(ngModel)] 可用的代碼如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+++ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
+++ FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
通過以上的配置之後，你就可以開心的在 Angular 中使用雙向數據綁定了
