Day 23：开始来学资料系结：属性系结（二）

上一篇谈到在 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"。