为什么colspan不是Angular 2中的已知原生属性？
sup*_*ary 64 javascript dom angular
如果我们尝试这样的代码:
<td [colspan]="1 + 1">Column</td>
或这个:
<td colspan="{{1 + 1}}">Column</td>
我们很快发现" colspan不是一个已知的原生属性".
从A2文档中我们了解到:
该元素没有colspan属性.它具有"colspan"属性,但插值和属性绑定只能设置属性,而不能设置属性.
我们必须这样做:
<td [attr.colspan]="1 + 1">Column</td>
这是公平的.
题:
我的问题是,为什么colspan不是DOM的属性,如果它缺少,浏览器怎么可能呈现表,因为浏览器呈现DOM而不是HTML？
另外,如果我打开Chrome检查器,然后转到属性选项卡,为什么我可以将colspan视为Element的属性？
为什么DOM表现出这种不一致性？
Gün*_*uer 103
**类似的例子 <label for=...>
属性和属性并不总是1:1.一个经常遇到的例子是label标签
<label for="someId">
在Angular
<label [for]="someId">
失败并出现相同的错误,您需要绑定
<label attr.for="{{someId}}">
要么
<label [attr.for]="someId">
但
<label [htmlFor]="someId">
也可以工作,因为在这种情况下htmlFor是反映到DOM for属性的属性.又见https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement的htmlFor属性(在Properties部分)
另请参见属性和属性有什么区别？
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.你明确选择昂贵的行为.
- [attr.for]的知识节省了我的一天.我把我的头发弄错了"不能绑定''contenteditable',因为它不是'td'的已知属性" (2认同)
我的问题是,为什么colspan不是DOM的属性,如果缺少,浏览器怎么可能呈现表,因为浏览器呈现DOM而不是HTML？
Colspan是DOM的一个属性,但它不是属性,所以它是只读的,浏览器会渲染它,因为它是一个属性.
另外,如果我打开Chrome检查器,然后转到属性选项卡,为什么我可以将colspan视为Element的属性？
检查时,chrome会显示属性和属性.
如果你考虑跟随,
<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结果undefined
因为它不是财产
but document.getElementById('xyz').id结果xyz
因为它是一个属性
Angular 中的属性和属性：
当浏览器解析 HTML 时，它将在内存中创建已解析 HTML 的 DOM 表示。来自属性的数据通常会成为 DOM 中存在的属性的初始值。
由于 colspan 不是 DOM 属性，<td>但 colSpan（大写字母 S）是一个，因此您必须使用 colSpan 属性。这是<td>chrome devtools 中显示的一个元素：
我们可以看到html属性保存在属性DOM属性中。重要的是要认识到当前的 colspan 反映在 DOM colSpan 属性中，可以在下面的图像中观察到。
当您在 Angular 中使用属性绑定时，您实际上是与这些 DOM 属性进行 1 对 1 的绑定。因此，为了绑定到 colSpan 属性，我们需要以下语法：
<td [colSpan]="1 + 1">Column</td>
我们还可以直接绑定到 Angular 中的属性，正如您使用以下语法所指出的：
<td [attr.colspan]="1 + 1">Column</td>
为什么 DOM 表现出这种不一致？
- 出于一致性原因，所有 DOM 属性均采用小驼峰格式
- 并非所有属性都可以以一对一的方式转换为 DOM 属性。以 class 属性为例，我们可以在示例图像中看到 HTML 中的 class 属性产生 2 个 DOM 属性（
classList,className）。
| 归档时间： |
|
| 查看次数： |
26554 次 |
| 最近记录： |