Angular2入門教學(5) - [property]與屬性綁定

這篇開始應該才算正式進入Angular2
只前都只是在試完一下，沒有真正的介紹原理用法規則

這篇會開始介紹規則用法與簡單的小用途實例
之前的教學[hidden]即是用ng2的屬性綁定功能
那規則用法是什麼呢？
其實相當單純，就是今天如果想在元素上綁定一個屬性
只要用[]包住屬性名稱，右側則是要綁定的變數值
例如我要綁定id屬性

<div [hidden]="!edit" [id]="id">
     <input type="text" [(ngModel)]="name" />
</div>

並且在.ts檔宣告一個id變數

id = "abc";

這樣去瀏覽器上看就可以看到該div的id="abc"

但是今天有一點要特別注意
我們想在td元素上的colspan屬性綁定2的值

<table border="1">
    <tr>
        <td [colspan]="2">1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

回到瀏覽器上發現會報錯，問題是出在哪呢？
就如本篇標題所示，[]是用來榜定property的
而colspan是attribute不是property
所以執行時會出現錯誤
至於property與attribute的差別，可以自行google
那ng2能榜定attribute嗎？當然可以
只要稍微改變一下寫法，在想榜定的attribute前面加上attr.

<table border="1">
    <tr>
        <td [attr.colspan]="2">1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

這樣就可以正常的運作
而使用attr.的綁定，就什麼名稱都可以正常綁定
常用的data-*也可以使用[attr.data-*]來綁定

那這樣綁定要做什麼？當然就是能在.ts中操作html上的屬性值啦
綁定的用法是不是相當的簡單又直覺呢？

初學時看教學文章，即使一個小步驟沒打，也容易會不知道怎麼往下做
故以下影片是一步一步做的，以補文章的不足

本範例檔案