如果沒看上一節的話,建議您看一下(點擊這里)

接著上一節的問題講:
輸入框名字被修改的時候,標題怎么跟著一塊改變?

這個時候要用到Angular里面很重的一個東東:雙向數據綁定
用官網的話叫做 Two-Way Binding

1.找到文件 ?src/app/app.module.ts 并打開編輯
? ? 看一下import 引入模塊 有沒有引入 FromsModule 這個模塊,
? ? 如果沒有,通過import 來自己引入一下
? ? import {FormsModule} from "@angular/forms";
? ?引入成功之后,在@NgModule 的 imports: 數組中加入該模塊(圖1)

圖1

接下來,修改 src/app/app.component.ts 中的模板 template 的 hero.name 輸入框,修改結果如下(圖2):

圖2

2.好了,現在,我們達到一個效果: 當名字被修改的時候,其他使用的hero.name的地方,也會跟著變化,這也正好體現出來了Angular中雙向數據綁定的魅力了:
? ? 界面上input 中 hero.name 發生變化,導致數據中hero.name發生變化,又導致了界面中h2里面hero.name發生了變化
? ? ?那么接下來再拋出一個問題: ?有沒有感覺我們的界面太單調了,界面上只有一個英雄?
? ? 接下來,我們要創建多個英雄,讓它們同時都顯示到界面上,這也是開發項目時候,最長用的一個list控件的生成方式了
? ? ?首先在 src/app/app.component.ts 中通過我們的英雄(Hero)類創建10個英雄,代碼如圖3所示:

圖3

接下來修改數據中的hero和模板的顯示方式
如圖4所示:

圖4

3.代碼改好之后,在瀏覽器的界面上會發現,我們數據中的10個英雄全部到顯示到界面上了,但是,好像樣式有點單調,沒啥意思,接下來,我們就來修改一下樣式咯:
@Component 這個東東,不僅可以擁有模板(template)屬性,還可以擁有樣式(styles)屬性:
如下圖(圖5)所示:
? ??

圖5

好了,為我們的英雄們做點樣式,讓它們好看一點吧:
樣式代碼如圖6所示:

圖6

4.下面,讓我們為每一個英雄,添加一個點擊事件,要求,英雄點擊之后,在上面顯示英雄的詳細信息:
? ? 首先為每一個英雄所在的li增加點擊事件:如圖7所示:

圖7

然后,在組件中,實現該點擊事件:如圖8所示:

圖8

點擊的時候,把點擊事件得到的hero 賦值 給了 selectedHero變量

接下來,增加模板內容,顯示當前選中的 li 的英雄: 如圖9所示:

圖9

其中 *ngIf="selectedHero" 的意思就是說:當頁面剛加載進來的時候,沒有觸發點擊事件的時候,
selectedHero 變量是沒有值的, 當selectedHero 變量沒值的手,整個div不顯示也不加載,否則會報下面的錯 (圖10):

圖10

意思就是所,selectedHero 是 undefined,所有他沒有name屬性,
只有當 li 被點擊了,selectedHero 才會有值

5.通過下面圖6的方式為每一個 li 增加一個 selected class:

圖6

[class.xxx]的用法:
<a [class.xxx] = "true"> 代表 該a標簽擁有 xxx 這個class
<a [class.xxx] = "false"> 代表 該a標簽沒有 xxx 這個class

6.當前我們達到的一個效果是這樣的:點擊某個英雄,讓英雄的詳細信息在當前界面的上半部分顯示,能不能當點擊某一個英雄的時候,讓英雄的詳細信息用另一個新的模板界面顯示呢?
答案是肯定的,下一節,我們就來講一下 多組件的配合使用和傳值的問題 (Angular2 三:Hero Demo 多組件模板配合使用)