Javascript 为什么 colspan 在 Angular 2 中不是已知的原生属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35615751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is colspan not a known native attribute in Angular 2?
提问by superluminary
If we attempt code like this:
如果我们尝试这样的代码：
<td [colspan]="1 + 1">Column</td>
or this:
或这个：
<td colspan="{{1 + 1}}">Column</td>
We soon find out that "colspanis not a known native attribute."
我们很快就会发现“colspan不是已知的原生属性”。
From the A2 docs we learn that:
从 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.
该元素没有 colspan 属性。它具有“colspan”属性，但插值和属性绑定只能设置属性，不能设置属性。
We must instead do this:
我们必须这样做：
<td [attr.colspan]="1 + 1">Column</td>
Which is fair enough.
这是公平的。
Question:
题：
My question is, why is colspannot 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?
我的问题是，为什么colspan不是 DOM 的属性，如果它缺失，浏览器怎么可能呈现表格，因为浏览器呈现 DOM 而不是 HTML？
Also, if I open my Chrome inspector, and go to the properties tab, why can I see colspan as a property of the Element?
另外，如果我打开 Chrome 检查器并转到属性选项卡，为什么我可以将 colspan 视为元素的属性？
Why does the DOM exhibit this inconsistency?
为什么 DOM 会出现这种不一致？
回答by Günter Z?chbauer
**Similar example <label for=...>
**类似的例子 <label for=...>
Property and attribute aren't always 1:1. An often encountered example is the label tag
属性和属性并不总是 1:1。一个经常遇到的例子是标签标签
<label for="someId">
In Angular
在角度
<label [for]="someId">
fails with the same error and you'd need to bind like
失败并出现相同的错误，您需要像这样绑定
<label attr.for="{{someId}}">
or
或者
<label [attr.for]="someId">
but
但
<label [htmlFor]="someId">
would also work because in this case htmlForis the property that is reflected to the DOM forattribute.
See also https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElementfor the htmlForproperty (in the Propertiessection)
也可以工作，因为在这种情况下htmlFor是反映到 DOMfor属性的属性。另见https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement的htmlFor属性（在Properties部分）
See also What is the difference between attribute and property?
另请参阅属性和属性有什么区别？
colSpanthe actual property name
colSpan实际属性名称
According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElementcolSpanis the property that is reflected to the colspanattribute therefore (uppercase S)
根据https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElementcolSpan是反映到colspan属性的属性，因此（大写S）
<td [colSpan]="1 + 1">Column</td>
See also https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview
另见https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview
works just fine.
工作得很好。
Why does Angular bind to properties by default
为什么 Angular 默认绑定到属性
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.
出于性能原因，Angular 默认绑定到该属性。绑定到属性很昂贵，因为属性反映在 DOM 中，DOM 中的更改会导致重新评估更改后可能匹配的 CSS 样式，而属性只是已更改的 JavaScript 对象中的值。
随着attr.您明确选择昂贵的行为。
回答by Low Flying Pelican
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?
我的问题是，为什么 colspan 不是 DOM 的属性，如果缺少它，浏览器如何呈现表格，因为浏览器呈现的是 DOM 而不是 HTML？
Colspan is an attribute of the DOM but it's not a property, so it's read only and browser renders it because it's an attribute.
Colspan 是 DOM 的一个属性，但它不是一个属性，所以它是只读的，浏览器会渲染它，因为它是一个属性。
Also, if I open my Chrome inspector, and go to the properties tab, why can I see colspan as a property of the Element?
另外，如果我打开 Chrome 检查器并转到属性选项卡，为什么我可以将 colspan 视为元素的属性？
The chrome shows both attributes and properties when you inspect it.
当您检查时，镶边会显示属性和属性。
If you consider following,
如果你考虑跟随，
<html>
<head>
</head>
<body>
<table>
<tr><th>A</th><th>A</th></tr>
<tr><td colspan="2" id="xyz">B</td></tr>
</table>
</body>
</html>
document.getElementById('xyz').colspanresults in undefinedSince it's not a property
document.getElementById('xyz').colspan结果undefined因为它不是属性
but document.getElementById('xyz').idresults in xyzSince it's a property
but document.getElementById('xyz').id结果是xyz因为它是一个属性
回答by Willem van der Veen
Attributes & properties in Angular:
Angular 中的属性和属性：
When the browser parses the HTML it will create an in memory DOM representation of the parsed HTML. What the data from the attributes often will become initial values for properties which are present in the DOM.
当浏览器解析 HTML 时，它将在内存中创建已解析 HTML 的 DOM 表示。来自属性的数据通常会成为 DOM 中存在的属性的初始值。
Since colspan isn't a DOM property of an <td>but colSpan (capital letter S) is one you will have to use the colSpan property. Here is an <td>element shown in chrome devtools:
由于 colspan 不是 DOM 属性，<td>但 colSpan（大写字母 S）是其中之一，因此您必须使用 colSpan 属性。这是<td>chrome devtools 中显示的一个元素：
We can see that the html attributes are saved in the attribute DOM property. It is important to realise that the current colspan is reflecting in the DOM colSpan property which can be observed below in the image.
我们可以看到html属性保存在attribute DOM属性中。重要的是要意识到当前的 colspan 反映在 DOM colSpan 属性中，可以在下面的图像中观察到。
When you are using property binding in Angular you are binding literaly 1 to 1 with these DOM properties. So in order to bind to the colSpan property we would need the following syntax:
当您在 Angular 中使用属性绑定时，您将使用这些 DOM 属性按字面意思 1 到 1 进行绑定。因此，为了绑定到 colSpan 属性，我们需要以下语法：
<td [colSpan]="1 + 1">Column</td>
We can also bind directly to attributes in Angular, as you pointed out with the following syntax:
我们还可以直接绑定到 Angular 中的属性，正如您使用以下语法指出的那样：
<td [attr.colspan]="1 + 1">Column</td>
Why does the DOM exhibit this inconsistency?
为什么 DOM 会出现这种不一致？
- For consistency reasons all DOM properties are lower camel cased
- Not all attributes can be transformed into DOM properties in a 1 to 1 fashion. Take for example the class attribute, we can see in the example image that the class attribute in our HTML results in 2 DOM properties (
classList,className).
- 出于一致性原因，所有 DOM 属性都采用较低的驼峰格式
- 并非所有属性都可以以 1 对 1 的方式转换为 DOM 属性。以 class 属性为例，我们可以在示例图像中看到 HTML 中的 class 属性导致 2 个 DOM 属性 (
classList,className)。
