时间戳

首页 > 解决方案 > 如何动态合并表格中的单元格

html - 如何动态合并表格中的单元格

问题描述

我想合并表格中的单元格，我知道最明显的方法 - 使用rowspan属性。

 <table>
   <tr>
      <th rowspan="2">data</th>
      <td>
        first_data_element: 1 second_data_element: "abc"
      </td>
    </tr>
    <tr>
      <td>
        first_data_element: 2 second_data_element: "xyz"
      </td>
    </tr>
  </table>

但是，实际上我的表是动态创建的——单元格内容是从数据库中获取的——所以我必须使用 * ngFor指令

<table>
  <tr>
      <th rowspan="2">data</th>
      <td *ngFor="let el of data.dataElement">
        species: {{el.firstDataElement}} weight: {{el.secondDataElement}}
      </td>
    </tr>
</table>

但是这不起作用，请注意，rowspan 的值是永久输入的。我需要的是在此处输入图像描述

标签： htmlcssangular

解决方案

您需要在 Angular 中使用属性绑定，以便动态设置值，如下所示：

<th [attr.rowspan]="data.dataElement.length">data</th>

请在此处找到文档：https ://angular.io/guide/template-syntax#attribute-binding

请在此处找到工作的 stackbitz：https ://stackblitz.com/edit/angular-ivy-rln5dj

推荐阅读