如何使用角度将单元格 colspan 基于条件值？

Posted 2023-03-05

【中文标题】如何使用角度将单元格 colspan 基于条件值？

【英文标题】：How can I base a cells colspan on a conditional value using angular?

【发布时间】：2016-07-17 13:19:14

【问题描述】：

基于 html 页面上其他地方的值，我需要在表格中的一行显示比表格中其他任何地方更多的单元格。为了保持对齐正确并且一切都干净，我正在寻找一种使用角度动态设置单元格跨度的方法。我似乎无法让这个工作。

<input type="checkbox" ng-model="vm.noInventory"/>

<table>  
  <th>
     <td>Product</td>
     <td colspan=vm.noInventory ? '2' : '1'>Inventory<td>
     <td ng-show="vm.noInventory"></td>
  </tr>
  <tr>
     <td>Product B</td>
     <td>55 parts</td>
     <td ng-show="vm.noInventory">Backordered</td>      
  </tr>

</table>

【参考方案1】：

找到解决方案...我实际上有一个错字，需要在 colspan 中包含“”...

<td colspan="vm.noInventory ? '2' : '1'">Inventory<td>

【讨论】：

谢谢！使用 Angular 2 我正在这样做：[attr.colspan]="isTrueValue ? '2' : '0'"

【参考方案2】：

如果您在动态生成表格行的角度工作，您可以使用以下 <td [attr.colspan]="fieldsChanged.fieldName == 'Comments' ? '2' : ''"> fieldsChanged.newValue</td>

【参考方案3】：

如果您可以通过 CSS 设置 colspan，另一种方法是利用 ng-style 并定义一个函数，该函数返回一个与您内联指定的对象相似的对象。

例如，您可以将 ng-style 指令添加到 TD 元素，如下所示：

<td ng-style=vm.colWidth(vm.noInventory)>Inventory<td>

在你的 JS 中：

vm.colWidth = function(noInv) 
  return  "colspan": noInv ? '2' : '1' ;
;

【参考方案4】：

对于任何在使用此功能时遇到问题的人，this 帖子的顶部评论会有所帮助。最后我使用[colSpan]="holdingsData.fund.entity[0].ticker ? '2' : '1'"obviosly 输入你自己的变量，它应该可以解决问题。