Angular14中如何扩展表格？需在<th>中添加‘over 1 year’

静态添加方式 #

如果不需要动态控制内容，直接在模板的<th>标签内写入内容即可，两种常见场景：

• 修改现有表头列，追加内容：

<th>原有表头内容 over 1 year</th>

• 新增独立的表头列：

<th>over 1 year</th>

动态绑定方式 #

如果内容需要根据组件逻辑动态变更，可通过Angular的数据绑定实现：

1. 在组件类（com1.component.ts）中定义变量：

export class Com1Component {
  // 定义要展示的文本
  overYearLabel = 'over 1 year';
}

2. 在模板（com1.component.html）中使用插值绑定：

<!-- 单独作为表头列 -->
<th>{{ overYearLabel }}</th>

<!-- 结合原有内容展示 -->
<th>周期: {{ overYearLabel }}</th>

适配表格整体结构 #

如果是新增表头列，记得在表格的<tbody>中对应新增<td>，保证表格结构完整：

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>近1年销量</th>
      <!-- 新增的表头 -->
      <th>over 1 year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>1200</td>
      <!-- 对应新增的数据列 -->
      <td>15000</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者okmmy123456