Angular：是否可以按列合并单元格？答案

【问题标题】：Angular: Is it possible to merge cells by columns?Angular：是否可以按列合并单元格？
【发布时间】：2020-04-28 09:05:26
【问题描述】：

我是 Angular 新手，以下是场景：我花了 2 天时间。

这是我的代码：

 <table>
    <tr>
      <td style="width: 10%;"></td>
      <th style="width: 10%;">Date 2</th>
      <th style="width: 10%;">Date 3</th>
      <th style="width: 10%;">Date 4</th>
      <th style="width: 10%;">Date 5</th>
      <th style="width: 10%;">Date 6</th>
      <th style="width: 10%;">Date 7</th>
      <th style="width: 10%;">Date 8</th>
      <td style="width: 10%;"></td>
    </tr>

<div *ngFor="let itemdata of Data;">
    <tr *ngFor="let item of arrayOne(8); let i = index;">
        <td style="width: 10%;">row: {{i}}</td>
        <td style="width: 10%;">row {{i}} - col: 2</td>
        <td style="width: 10%;">row {{i}} - col: 3</td>
        <td style="width: 10%;">row {{i}} - col: 4</td>
        <td style="width: 10%;">row {{i}} - col: 5</td>
        <td style="width: 10%;">row {{i}} - col: 6</td>
        <td style="width: 10%;">row {{i}} - col: 7</td>
        <td style="width: 10%;">row {{i}} - col: 8</td>
        <td style="width: 10%;">row: {{i}}</td>
    </tr>
</div>
</table>

.ts 中的数据打字稿是：

Data: any[] = [
    {
      "maMH":"BT1",
      "nameMH":"Name 1",
      "date":3,
      "rowBegin":2,
      "merge":2,
    },
    {
      "maMH":"BT2",
      "nameMH":"Name 2",
      "date":5,
      "rowBegin":4,
      "merge":3,
    },
  ]

所以，我不知道如何在 html 中合并列（使用 *ngFor="let itemdata of Data）（如下例所示）。

enter image description here

请问有什么编码方式吗，谢谢。

【问题讨论】：

Data: any[]你使用的是打字稿还是javascript？
哦，打字稿！
请多解释一下您要达到的目标。您是说要合并列，但您提供的图像仅显示跨越多行的行中的某些单元格。
表示我有数据是：“day”：3，“rowBegin”：2，“merge”：2，如何合并单元格并在 html 中显示（使用 *ngFor="let itemdata of数据”）与我的图像相同。谢谢

标签： html angular typescript

【解决方案1】：

已编辑：我认为您正在寻找rowspan。但这有一些缺点，即存在于行跨度超出范围的任何单元格都将被推送到下一列。

您可能想查看一个包，例如datatables。它具有比标准 HTML 表格更多的可扩展功能。貌似支持rowspan和colspan：datatables docs

【讨论】：