Angular表格组件如何基于tableOptions配置实现cssSubCell的条件绑定

错误原因 #

你将判断条件直接写在cssSubCell的字符串值中的写法是无效的：该字段的取值会被作为普通字符串直接插入模板的class属性中，Angular不会解析字符串内部的逻辑表达式，因此你写的条件不会被识别执行，只会被当作类名的一部分。

正确实现方案 #

最优方案是修改table-multi-sort-cell-default.component.html模板，利用Angular原生的[ngClass]指令实现条件类绑定，无需修改原有配置项：

<!-- 原代码 -->
<!-- <div class="cellSubText secondary-text {{cssSubCell}}" >{{cellData[subId]}}</div> -->

<!-- 修改后代码 -->
<div 
  class="cellSubText secondary-text"
  [ngClass]="subId !== 'test' ? cssSubCell : ''"
>
  {{cellData[subId]}}
</div>

原有tableOptions中的cssSubCell配置保持不变即可：

cssClass: {
  cssCell:'',
  cssSubCell: 'c-black fs-14px'
}

可选替代方案 #

如果不想修改子组件模板，也可以在父组件table-multi-sort.component.html传参时添加条件判断：

<app-table-multi-sort-cell-default 
  [cellData]="row"  
  [id]="column.id" 
  [subId]="getColumnSubId(column.id)" 
  [cssCell]="cssClass.cssCell" 
  [cssSubCell]="getColumnSubId(column.id) !== 'test' ? cssClass.cssSubCell : ''" 
>
</app-table-multi-sort-cell-default>

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