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

Question

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

 <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 的值是永久输入的。
我需要的是

Answer 1

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

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

请在此处找到文档: https://angular.io/guide/template-syntax#attribute-binding
请在此处找到有效的 stackbitz: https://stackblitz.com/edit/angular-ivy-rln5dj