角度 ag-grid 单元格渲染器复选框不刷新值

Posted 2023-02-22

【中文标题】角度 ag-grid 单元格渲染器复选框不刷新值

【英文标题】：Angular ag-grid cell renderer checkbox not refresh value

【发布时间】：2018-08-10 12:08:30

【问题描述】：

我为复选框输入创建了单元格渲染器，但是当我单击复选框时，它会更改内部而不是单元格上的值。

查看 plunker 示例：Plunker

refresh 方法应该在更改时调用，但不知何故它不是。

onCellClicked 函数返回的值仍然相同，无论我如何单击复选框。

我尝试cellEditor: 'agRichSelect' 使用两个可能的值true 和false，它们工作正常，但我需要复选框。

感谢您的任何想法！

【参考方案1】：

First，要跟踪ngModel 的变化，您需要使用(ngModelChange) 而不是(onChange)。

第二，你不应该使用params.value来绑定ngModel，params - 是grid的一部分，所以要避免混用，分开存放。

Third，在refresh 函数内部cellRenderer 你不应该更新params，refresh 函数内部用于grid。

// Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
// If you return false, the grid will remove the component from the DOM and create
// a new component in its place with the new values.
refresh(params: any): boolean;

第四，如果你想更新cellRenderer内部的值，你应该使用ICellEditorComp接口而不是ICellRendererComp（ICellRendererAngularComp和ICellEditorAngularComp在Angular情况下）

第五，您忘记在columnDefs中设置复选框字段editable: true

最后一个 - 您刚刚创建了复选框（超出grid 范围），看起来像是一个工作示例，但实际上并非如此。

如果ag-grid，您需要了解完整的编辑过程，因此只需在此处查看有关cell rendering、cell editing 等的详细信息。

here 你可以看到exactly 自定义复选框渲染器将如何工作：

function booleanCellRenderer(params) 
    var valueCleaned = booleanCleaner(params.value);
    if (valueCleaned === true) 
        return "<span title='true' class='ag-icon ag-icon-tick content-icon'></span>";
     else if (valueCleaned === false) 
        return "<span title='false' class='ag-icon ag-icon-cross content-icon'></span>";
     else if (params.value !== null && params.value !== undefined) 
        return params.value.toString();
     else 
        return null;