在前端开发中，我们经常使用表格来呈现数据。而在 HTML 表格中，我们可以用 colspan 属性来指定单元格跨越的列数。但是在 Angular 2 中，这个属性却不再被认为是一个原生属性，这意味着我们无法直接在组件模板中使用它。
背景
在 Angular 2 中，我们可以使用数据绑定（Data Binding）和结构指令（Structural Directive）来创建动态的表格。在使用 *ngFor 指令生成表格时，我们可能需要让某些单元格跨越多个列。传统的 HTML 中，我们可以通过设置 colspan 属性来实现这一点：
-------
----
--- ---------------- ------
-------- ------
-------- ------
-----
----
--- ---------------- ------
-----
--------上面的例子中，第二行的第一个单元格跨越两列。但是在 Angular 2 中，下面的代码将会出错：
-------
----
--- ---------------- ------
-------- ------
-------- ------
-----
----
--- ---------------- ------
-----
--------解释
为什么 colspan 不再是一个原生属性呢？这是因为，Angular 2 中的模板是基于组件的，而组件中只能使用与组件相关的属性和指令。换句话说，只有那些在组件类中定义了的属性才可以在组件模板中使用。而 colspan 并不是一个组件的属性，所以它也不能被用在组件模板中。
那么，在 Angular 2 中，如果我们需要让某个单元格跨越多列，应该怎么办呢？答案是使用 ng-container 和 ng-template。
ng-container 是一个空元素，它不会被渲染到 HTML 页面上，但可以作为结构性指令的容器。ng-template 则是一个虚拟的 DOM 模板，它也不会被渲染到页面上，但可以通过结构性指令来添加或删除它的内容。结合它们两个，我们就可以实现跨列的效果了。
下面是一个使用 ng-container 和 ng-template 实现跨列的例子：
-------
----
--- ---------------- ------
-------- ------
-------- ------
-----
----
------------- ------------------------------------------------
-----
--------
------------ -------------
--- ---------------- ------
--------------在上面的例子中，我们使用了 ng-container 来作为 ngTemplateOutlet 的容器，并将模板绑定到了 #colSpanCell 这个变量上。最后，在模板中，我们定义了一个跨越两列的单元格。
总结
虽然在 Angular 2 中不能直接使用 colspan 这个原生属性，但是通过 ng-container 和 ng-template 可以很方便地实现跨列效果。这也说明了在前端开发中，我们需要不断学习新的技术和工具，才能更好地应对日益复杂的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28172