Angular中Kendo Grid复选框事件处理及状态列条件显示实现

安全阿岳

2026-10-30

问题原因梳理

你当前代码导致问题的核心点有两个：

两个独立功能共用同一个Discontinued字段：这个字段本来应该存储复选框的勾选布尔状态，你把状态列的数据源也指向了这个字段，还在切换时硬赋值字符串，一旦值被设置为'primary'，后续没有逻辑能把它清掉
切换逻辑没有做分支判断：原toggle方法不管复选框是从勾选变取消、还是从取消变勾选，都统一执行dataItem[field] = 'primary'，完全没有清空值的逻辑

修正实现代码

模板部分

<kendo-grid [data]="gridData" [navigable]="true" [selectable]="{ mode: 'single' }">
  <!-- 复选框列：绑定行的布尔勾选状态 -->
  <kendo-grid-column field="Discontinued" title="" width="20">
    <ng-template kendoGridCellTemplate let-dataItem>
      <input 
        type="checkbox" 
        (change)="toggle(dataItem)" 
        [checked]="dataItem.Discontinued"
      />
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="ProductName" title="Units" [width]="30"></kendo-grid-column>

  <!-- 状态列：自定义模板控制内容显隐 -->
  <kendo-grid-column title="status" [width]="30">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem.Discontinued ? 'primary' : '' }}
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

TS 组件代码

public toggle(dataItem: any): void {
  // 反转当前行的勾选状态，不做多余的字符串赋值
  dataItem.Discontinued = !dataItem.Discontinued;
}

实现逻辑说明

状态列不再直接绑定Discontinued字段做数据源，而是通过单元格模板读取行的勾选状态做判断：勾选为true时渲染'primary'，取消勾选时输出空字符串，自然不会展示任何内容
复选框事件从click替换为原生的change事件，避免点击时机和实际勾选状态不同步的问题
逻辑解耦后，复选框只负责维护自身的布尔状态，状态列只负责根据状态渲染内容，不会出现值残留、取消勾选仍显示内容的问题