Angular中Generic UI表格如何从HTML渲染复选框？

我在Angular项目中使用Generic UI表格，按照官方文档在TS文件中配置如下代码可以正常展示复选框：

{
  header: 'GuiCellView.CHECKBOX',
  field: 'isFruit',
  type: GuiDataType.BOOLEAN,
  view: GuiCellView.CHECKBOX,
}

但我想通过HTML文件来渲染复选框，尝试以下代码后，页面只显示true/false值，没有出现复选框：

<gui-grid-column header="test" field="showtest" type=GuiDataType.BOOLEAN
            view=GuiCellView.CHECKBOX>
              <ng-template let-value="value">
                {{value.CHECKBOX}}
              </ng-template>
            </gui-grid-column>  

问题原因 #

你在<ng-template>里直接输出{{value.CHECKBOX}}是错误的，这里的value其实是当前单元格的布尔值（true/false），并非包含CHECKBOX属性的对象，所以只会显示布尔值本身。

解决方法 #

方法1：使用内置复选框视图

如果你只是想使用Generic UI自带的复选框样式，不需要自定义模板，直接调整列配置即可——注意HTML模板中不能直接引用TS枚举，要改用字符串形式的枚举值：

<gui-grid-column 
  header="test" 
  field="showtest" 
  type="boolean"
  view="checkbox">
</gui-grid-column>

方法2：自定义复选框渲染

如果需要自定义复选框的样式或交互逻辑，可以手动在模板中添加复选框元素，绑定单元格的布尔值到checked属性：

<gui-grid-column 
  header="test" 
  field="showtest" 
  type="boolean">
  <ng-template let-value="value">
    <!-- 只读复选框 -->
    <input type="checkbox" [checked]="value" disabled>
  </ng-template>
</gui-grid-column>

如果需要支持点击修改数据，可以添加change事件绑定更新行数据：

<gui-grid-column 
  header="test" 
  field="showtest" 
  type="boolean">
  <ng-template let-value="value" let-row="row">
    <input type="checkbox" 
           [checked]="value" 
           (change)="row.showtest = $event.target.checked">
  </ng-template>
</gui-grid-column>

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