如何为PrimeNG TurboTable的ColGroup colspan属性绑定变量？

我来帮你搞定这个问题！在Angular环境里，要把组件中的变量绑定到HTML元素的属性上，得用属性绑定语法——也就是用方括号[]把属性名包裹起来，这样Angular才会把它识别成组件里的变量，而不是普通字符串。

具体修改方法 #

你之前直接写colspan="colSpanCount"是无效的，因为Angular会把它当成字符串字面量处理。正确的写法是把colspan改成属性绑定形式：

<ng-template pTemplate="header">
  <tr>
    <th rowspan="3">Brand</th>
    <th colspan="4">Sale Rate</th>
  </tr>
  <tr>
    <!-- 使用属性绑定绑定colSpanCount变量 -->
    <th [colspan]="colSpanCount">Sales</th>
    <th colspan="2">Profits</th>
  </tr>
  <tr>
    <th>Last Year</th>
    <th>This Year</th>
    <th>Last Year</th>
    <th>This Year</th>
  </tr>
</ng-template>

额外注意点 #

别忘了在你的组件类（.ts文件）里提前定义好这个colSpanCount变量，比如：

// 你的组件类示例
export class YourTableComponent {
  // 可以根据业务逻辑动态赋值，这里先给个示例值
  colSpanCount = 2;
}

这样就能实现把组件中的变量动态绑定到TurboTable表头的colspan属性上啦！

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