在Angular 8中使用参数函数动态改变ag-grid的单元格渲染器答案

【问题标题】：Dynamically changing Cell Renderer of ag-grid using param function in Angular 8在Angular 8中使用参数函数动态改变ag-grid的单元格渲染器
【发布时间】：2020-08-07 17:25:36
【问题描述】：

有人可以帮我解决这个问题吗？我在 Angular 8 中使用 ag-Grid，其中有一列将单元格渲染器作为单个按钮（比如说删除按钮），但是当网格触发 cellValueChange 事件时，即当特定单元格值更改时，我想删除按钮单元格渲染器被其他单元格渲染器替换。

这是我在做什么，

columnDefs: {

    headerName: 'Delete'
    cellRenderer: (params: ICellRendererParams) => {
        return getCellRenderer(params);
    }
}

getCellRenderer(params)
{
    if (params.value.isEdit)
        return 'updateRenderer';
    else
        return 'deleteRenderer';
}

isEdit 是网格中的隐藏列，其值在事件调用时设置为 1，否则默认情况下所有行都为 0。

所以，这个函数应该返回渲染器。我创建了 frameworkComponent 如下：

frameworkComponent: {
    deleteRenderer: DeleteRendererComponent,
    updateRenderer: UpdateRendererComponent
}

现在，当我提供 cellRenderer: 'deleteRenderer' 时，我得到了一个正确的组件渲染。但是当我通过函数调用它时，我只将字符串打印为 deleteRenderer，而不是组件。

提前致谢，我们将不胜感激。

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

我建议您将两个单元格渲染器合并为一个，并根据您可以作为cellRenderer 参数传递的字段的值来决定操作。

类似的东西-

cellRenderer: 'commonRenderer'
cellRendererParams: {
  editable : "isEdit" // pass the field value here
}

在您的单元格渲染器组件中，您可以像这样访问agInit 中的这个可编辑参数 -

agInit(params: any) : void {
    params.editable // here
}

现在您可以根据这个传递的参数值分支更新/删除逻辑。

单元格渲染器组件example

【讨论】：

谢谢，我得到了这条路径，但必须围绕它实现更多的东西。