为什么 Colspan 在角度2中不是一个已知的本地属性？

小开

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 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.

Also, if I open my Chrome inspector, and go to the properties tab, why can I see colspan as a property of the Element?

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').colspan results in undefined Since it's not a property

but document.getElementById('xyz').id results in xyz Since it's a property

小开

最佳答案

**Similar example <label for=...>

Property and attribute aren't always 1:1. An often encountered example is the label tag

<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 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 the actual property name

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>

works just fine.

Why does Angular bind to properties by default

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.

小开

Attributes & properties in 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.

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:

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.

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:

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

We can also bind directly to attributes in Angular, as you pointed out with the following syntax:

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

Why does the DOM exhibit this inconsistency?

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).

为什么 Colspan 在角度2中不是一个已知的本地属性？

问题:

Attributes & properties in Angular: