为什么colspan在Angular 2中不是已知的native属性？ [英] Why is colspan not a known native attribute in Angular 2?
问题描述
如果我们尝试这样的代码：
If we attempt code like this:
<td [colspan]="1 + 1">Column</td>
或这个：
<td colspan="{{1 + 1}}">Column</td>
我们很快就会发现 colspan 是不是一个已知的本机属性。
We soon find out that "colspan is not a known native attribute."
从A2文档中我们了解到：
From the A2 docs we learn that:
该元素没有colspan属性。它具有colspan属性，但插值和属性绑定只能设置属性而不是属性。
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？
My question is, why is colspan not an attribute of the DOM, and if it is missing, how can the browser possibly render tables, since the browser renders the DOM and not the HTML?
此外，如果我打开Chrome检查器，然后转到属性选项卡，为什么我可以看到colspan作为Element的属性吗？
Also, if I open my Chrome inspector, and go to the properties tab, why can I see colspan as a property of the Element?
为什么DOM会出现这种不一致？
Why does the DOM exhibit this inconsistency?
推荐答案
**类似的例子< label for = ...>
属性和属性并不总是1：1。经常遇到的例子是标签标签
Property and attribute aren't always 1:1. An often encountered example is the label tag
<label for="someId">
In Angular
In Angular
<label [for]="someId">
失败，出现相同的错误，您需要绑定如
fails with the same error and you'd need to bind like
<label attr.for="{{someId}}">
或
<label [attr.for]="someId">
但
<label [htmlFor]="someId">
也可以工作，因为在这种情况下 htmlFor 是反映到DOM 的属性，用于属性。
另请参阅 https://developer.mozilla.org/de/ htmlFor 属性（在属性部分）中的docs / Web / API / HTMLLabelElement
would also work because in this case htmlFor is the property that is reflected to the DOM for attribute.
See also https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement for the htmlFor property (in the Properties section)
另请参见什么是属性和属性之间的区别？
colSpan 实际属性名称
colSpan the actual property name
根据 https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan 是反映到 colspan 属性（大写 S ）
According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan is the property that is reflected to the colspan attribute therefore (uppercase S)
<td [colSpan]="1 + 1">Column</td>
另请参见 https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview
工作正常。
为什么Angular默认绑定到属性
默认情况下，角度绑定到属性性能原因绑定到属性是昂贵的，因为属性反映在DOM中，并且DOM的更改可能导致重新评估更改后可能匹配的CSS样式，而属性只是更改的JavaScript对象中的值。
具有 attr。您选择明智地选择昂贵的行为。
Angular binds to the property by default for performance reasons. Binding to an attribute is expensive because attributes are reflected in the DOM and a change in the DOM can causes reevaluation of CSS styles that might match after the change, while properties are just a value in a JavaScript object that changed.
With attr. you opt in explicitely to the expensive behavior.
这篇关于为什么colspan在Angular 2中不是已知的native属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
