为什么colspan在Angular 2中不是已知的本机属性？

Question 1

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

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

Question 2

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

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

<label for="someId">

在角

<label [for]="someId">

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

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

要么

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

但

<label [htmlFor]="someId">

也会起作用，因为在这种情况下htmlFor是反映到DOMfor属性的属性。另请参阅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.您明确选择参加昂贵的行为。

Question 3

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

Colspan是DOM的属性，但不是属性，因此它是只读的，浏览器将其呈现，因为它是属性。

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

检查时，镶边会同时显示属性和属性。

如果您考虑关注，

<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 因为这是一个财产

Question 4

Angular中的属性和属性：

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

由于colspan不是的DOM属性，<td>而colSpan（大写字母S）是一个DOM属性，因此您必须使用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属性均为小写驼峰
并非所有属性都可以1对1的方式转换为DOM属性。以class属性为例，我们可以在示例图像中看到HTML中的class属性产生2个DOM属性（classList，className）。