如何将 colspan 动态添加到不同的<th>在表中(角 4) [英] How to dynamically add colspan to different &lt;th&gt; in table (Angular 4)

问题描述

我有一张这种形式的表格:

I have a table in this form:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

.blue {
    background-color: blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<table>
  <thead>
    <tr>
      <th class="blue">item 1</th>
      <th class="green" colspan="2">item 2</th>
      <th class="red" colspan="3">item 3</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    
  </tbody>
</table>

我想动态地将 colspan 和颜色添加到 angular 4 中的不同 th 标签:在我的角度应用程序中，我有:

I would like to dynamically add colspan and colors to different th tag in angular 4: In my angular application I have:

.html 文件

<tr *ngFor="let item of items">
  <th>{{ item }}</th>
</tr>

.ts 文件

items: string[] = ['item 1', 'item 2', 'item 3']

如何添加这些不同的 colspans 和颜色(看看我想要实现的片段)?非常感谢.

how to add these different colspans and colors (look at the snippet what I want to achieve)? Thank you very much.

推荐答案

我认为，这必须行得通，

I think, This must work,

<tr *ngFor="let item of items">
  <th [attr.colspan]="item.colspan">{{ item.name }}</th>
</tr>

项目所在的位置，

items: any = [{colspan:1,name:'item 1'}, {colspan:3,name:'item 2'}.....]

这篇关于如何将 colspan 动态添加到不同的<th>在表中(角 4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！