Question

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

<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视为元素的属性？

为什么DOM表现出这种不一致性？

Answer 1

**类似示例<label for=...>

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

<label for="someId">

在Angular中

<label [for]="someId">

失败并出现相同的错误，您需要像

一样绑定

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

或

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

但是

<label [htmlFor]="someId">

也可以，因为在这种情况下htmlFor是反映到DOM for属性的属性。另请参阅What is the difference between attribute and property?了解htmlFor属性（位于Properties部分）

另见https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement

colSpan实际的媒体资源名称

根据https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview colSpan是反映到colspan属性的属性（大写S）

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

另见{{3}}

工作正常。

为什么Angular默认绑定到属性

出于性能原因，默认情况下Angular绑定到属性。绑定到属性是很昂贵的，因为属性反映在DOM中，并且DOM中的更改可能导致重新评估可能在更改后匹配的CSS样式，而属性只是更改的JavaScript对象中的值。使用attr.，您可以明确地选择昂贵的行为。

Answer 2

我的问题是，为什么colspan不是DOM的属性，如果它缺少，浏览器如何才能呈现表格，因为浏览器呈现DOM而不是HTML？

Colspan是DOM的一个属性，但它不是属性，所以它是只读的，浏览器会渲染它，因为它是一个属性。

另外，如果我打开Chrome检查器，然后转到属性标签，为什么我可以将colspan视为元素的属性？

在检查时，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 因为它是一个属性

Answer 3

Angular中的属性和属性：

当浏览器解析HTML时，它将创建解析后HTML的内存DOM表示形式。来自属性的数据通常将成为DOM中存在的属性的初始值。

由于colspan不是<td>的DOM属性，但是colSpan（大写字母S）是一个，因此您必须使用colSpan属性。这是chrome devtools中显示的<td>元素：

我们可以看到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属性均为小写驼峰
并非所有属性都可以以1对1的方式转换为DOM属性。以类属性为例，我们可以在示例图像中看到HTML中的类属性产生2个DOM属性（classList，className）。

为什么colspan不是Angular 2中的已知原生属性？

问题：

3 个答案:

Angular中的属性和属性：