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

Question

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

参见 plunker 示例：Plunker

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

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

我尝试cellEditor: 'agRichSelect'了两个可能的值true，false效果很好，但我需要复选框。

谢谢你的任何想法！

Answer 1

首先，为了跟踪ngModel你需要使用(ngModelChange)而不是(onChange).

其次，你不应该使用params.value绑定ngModel，params- 是的一部分grid，所以只是避免混合东西并将其分开保存。

第三，在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大小写）ICellEditorAngularCompAngular

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

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

您需要了解完整的编辑过程ag-grid，因此只需在此处查看有关单元格渲染、单元格编辑等的详细信息。

在这里您可以看到自定义复选框渲染器的工作原理：

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;
    }
}