javascript – 为什么colspan在Angular 2中不是已知的native属性?

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

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

或这个:

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

我们很快就发现,“colspan不是一个已知的本机属性”.

从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表现出这种不一致?

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

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

<label for="someId">

在角度

<label [for]="someId"> 

失败,同样的错误,你需要绑定像

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

要么

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

<label [htmlFor]="someId">

也会工作,因为在这种情况下,htmlFor是属性反映到DOM的属性.
另请参见https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement for htmlFor属性(在“属性”部分)

参见What is the difference between attribute and property?

colSpan实际属性名称

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

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

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

工作很好

为什么Angular默认绑定到属性

出于性能原因,Angular默认绑定到属性.绑定到属性是昂贵的,因为属性反映在DOM中,并且DOM中的更改可能会导致重新评估更改后可能匹配的CSS样式,而属性只是更改的JavaScript对象中的值.
与attr.您选择明智地选择昂贵的行为.

http://stackoverflow.com/questions/35615751/why-is-colspan-not-a-known-native-attribute-in-angular-2

转载注明原文:javascript – 为什么colspan在Angular 2中不是已知的native属性?