为什么colspan在Angular 2中不是一个已知的本地属性

为了理解它，我们需要对文档对象模型（DOM）和超文本标记语言（HTML）有一个清晰深入的了解。
基本上，DOM是一个对象模型，是文档的逻辑树状表示，而HTML是一种标记语言，我们用来构建网页。
每个HTML属性都与DOM对象的属性有一对一的映射关系。

例子：名字

<label for="fname">First Name </label>
<input type="text" id="fname" name="fname" disabled >

所以，上面的例子包含两个标签label和input。我们可以看到，在input标签中定义了一个属性，即 “disabled”。
同样地，如果你谈论DOM属性，禁用也存在于输入对象内部。
但他们的情况是，HTML标签的某些属性在DOM内是不可用的。
例如：colspan。像colspan，所以当你试图在Angular 2+中使用它们进行属性绑定时，你会得到一个错误，说 “不能绑定colspan，因为它不是’td’的一个已知属性”。
同样，我们也有一些在DOM中定义的属性，但在HTML中却不存在。

示例:

<h2 [textContent]="title"></h1>

Solution:
为了使用它们进行属性绑定，你需要使用以下语法[attr.colspan]。

import {Component} from '@angular/core';
  
  
@Component({
  
selector:'app-colspan',
template:
`
<h4> Colspan Usage </h4>
<table>
  <tr>
   <td [attr.colspan]="colSpan">First Item </td>
  </tr>
  <tr>
   <td>Second Item</td>
   <td>Third Item </td>
  </tr>
</table>
`,
styles:[`
  
table, tr, td{
border: 1px solid black;
border-collapse:collapse;
}
`]
})
  
  
export class ColSpanComponent{
  
colSpan="2"
  
}

输出: