上一篇談到在 Angular 中使用 屬性繫結（Property binding） 的方法，也延伸了其他議題，就是 Property 及 Attribute 的區別，今天我們就要來聊聊這一塊。

假設，今天我們要在 HTML 裡去擴充 Attribute，在 HTML5 中是有明確定義的，可以透過 data attribute 來自由擴充。

我們這邊試作一個範例，在 HTML 中增加一個 data-title 的 attribute，然後試著將 data-title 與 AppComponent 裡的 title property 綁定，依照上一篇的語法，我們會寫成 [data-title]="title"。

但結果卻是會出現錯誤，而網頁也因此開不起來。

同時我們可以在終端機面板看到以下的這段錯誤訊息。

這裡的意思是，img 標籤下並沒有 data-title 這個 property，因為這個 property 是我們自定義的，所以無法隨意的使用 屬性繫結（Property binding） 來綁定 HTML 的 attribute。

這一個議題我們特別提出來探討，就是因為 Property 及 Attribute 都被翻譯為屬性，很容易就搞混兩者間的差異。

所以，我們先把剛才 HTML 裡的 [data-title]="title" 拿掉，讓網頁可以正常呈現。接著，在網頁上點擊右鍵，選擇檢查。

這邊可以看到 img 標籤中有許多 attribute，如：alt、class 及 title。

但 img 標籤有哪些 property 呢？這就表示我們要去查詢 img 這個 DOM 物件所有的 property，換句話說，這代表的是 JavaScript 的 property。而查詢的方法，如下圖所示：

點選上圖中的 Properties 頁籤後，點選 HTMLImageElement，就可以看到 img 這個 DOM 物件包含的 property 了，因此，我們可以知道 屬性繫結（Property binding） 的對象，是 img 這個 DOM 的 property，而不是 img 的 HTML attribute，這也解釋了為什麼我們使用自定義的 data attribute，卻無法成功綁定的原因，因為 img 的 DOM 中，並不存在 data-title 這個 property。

不過，我們仍然可以使用 Angular 提供的標準做法，來實現 data-title 這個 attribute 與 AppComponent 中的 title property 綁定的結果，就是將剛才的語法 [data-title]="title" 改成 [attr.data-title]="title"。

回到網頁驗證，可以發現畫面正常出現，而在圖片上按右鍵，選擇檢查時，也可以看出 data-title 的值，確實呈現了 AppComponent 中的 title property 的值。

以上，就是關於 Property 及 Attribute 與 屬性繫結（Property binding） 之間關聯的探討。