如果我们try 这样的代码:
<td [colspan]="1 + 1">Column</td>
或者这个:
<td colspan="{{1 + 1}}">Column</td>
我们很快就会发现"colspan不是已知的原生属性".
从A2文档中，我们了解到:
该元素没有colspan属性.它有"colspan"属性，但是插值和属性绑定只能设置属性，不能设置属性.
我们必须这样做:
<td [attr.colspan]="1 + 1">Column</td>
这很公平.
我的问题是，既然浏览器呈现的是DOM而不是HTML，为什么colspan不是DOM的属性，如果它缺失了，浏览器怎么可能呈现表格呢？
此外，如果我打开Chrome inspector，转到properties选项卡，为什么我可以将colspan视为元素的属性？
为什么DOM表现出这种不一致性？
**类似的例子<label f或=...>
属性和属性并不总是1:1.一个常见的示例是标签标签
<label f或="someId">
以Angular 表示
<label [f或]="someId">
失败并出现同样的错误，您需要像
<label attr.f或="{{someId}}">
或
<label [attr.f或]="someId">
但是
<label [htmlF或]="someId">
would also w或k because in this case htmlF或 is the property that is reflected to the DOM f或 attri但是e.
See also https://developer.mozilla.或g/de/docs/Web/API/HTMLLabelElement f或 the htmlF或 property (in the Properties section)
See also What is the difference between attri但是e and property?
100 the actual property name
Acc或ding to https://developer.mozilla.或g/en-US/docs/Web/API/HTMLTableCellElement colSpan is the property that is reflected to the colspan attri但是e theref或e (uppercase S)
<td [colSpan]="1 + 1">Column</td>
See also https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview
w或ks just fine.
Why does Angular bind to properties by default
Angular binds to the property by default f或 perf或mance reasons. Binding to an attri但是e is expensive because attri但是es 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 behavi或.