如何动态地将colspan添加到表中的不同<th>（Angular 4）答案

【问题标题】：How to dynamically add colspan to different <th> in table (Angular 4)如何动态地将colspan添加到表中的不同<th>（Angular 4）
【发布时间】：2018-02-03 09:46:02
【问题描述】：

我有一张这样的表格：

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 和颜色添加到角度 4 中的不同 th 标记：在我的角度应用程序中，我有：

.html 文件

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

.ts 文件

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

如何添加这些不同的 colspans 和颜色（看看我想要实现的 sn-p）？非常感谢。

【问题讨论】：

标签： javascript angular

【解决方案1】：

我想，这一定行得通，

<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'}.....]

【讨论】：

谢谢。这肯定会奏效。那颜色呢？一样吗？
如果是表属性，同理
如果它是一个样式属性，那么 [style.background]="item.bgcolor"
我不得不使用：{{ item.name }} 因为无法绑定到“colspan”，因为它是't' 的已知属性

【解决方案2】：

您仍然可以为您的项目添加颜色属性，以便您可以使用 [ngClass]="item.color" 对其进行绑定

【讨论】：