javascript - 为什么 colspan 不是 Angular 2 中已知的原生属性？

Question

如果我们尝试这样的代码:

<td [colspan]="1 + 1">Column</td>

或者这个:

<td colspan="{{1 + 1}}">Column</td>

我们很快发现“colspan 不是已知的 native 属性。”

从 A2 文档中我们了解到:

the element does not have a colspan property. It has the "colspan" attribute, but interpolation and property binding can set only properties, not attributes.

我们必须改为这样做:

<td [attr.colspan]="1 + 1">Column</td>

这很公平。

问题:

我的问题是，为什么 colspan 不是 DOM 的一个属性，如果缺少它，浏览器怎么可能渲染表格，因为浏览器渲染的是 DOM 而不是 HTML？

此外，如果我打开 Chrome 检查器并转到属性选项卡，为什么我可以看到 colspan 作为元素的属性？

为什么 DOM 会出现这种不一致？

Answer 1

**类似例子<label for=...>

属性和属性并不总是 1:1。一个经常遇到的例子是label标签

<label for="someId">

在 Angular

<label [for]="someId"> 

失败并出现同样的错误，你需要像这样绑定(bind)

<label attr.for="{{someId}}">

或

<label [attr.for]="someId">

但是

<label [htmlFor]="someId">

也可以，因为在这种情况下 htmlFor是反射(reflect)到 DOM 的属性 for属性。另见 https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement对于 htmlFor属性(在 Properties 部分)

另见 What is the difference between attribute and property?

colSpan实际属性名称

根据 https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan是反射(reflect)到 colspan 的属性因此属性(大写 S )

<td [colSpan]="1 + 1">Column</td>

另见 https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

工作得很好。

为什么 Angular 默认绑定(bind)属性

出于性能原因，Angular 默认绑定(bind)到属性。绑定(bind)到属性是昂贵的，因为属性反射(reflect)在 DOM 中，DOM 中的更改会导致重新评估更改后可能匹配的 CSS 样式，而属性只是 JavaScript 对象中已更改的值。
与 attr.您明确选择了昂贵的行为。