使用 Angular 8 中的参数函数动态更改 ag-grid 的 Cell Renderer

Question

有人可以帮我解决这个问题吗？我在 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。

因此，此函数应该 return 渲染器。我创建了 frameworkComponent 如下：

frameworkComponent: {
    deleteRenderer: DeleteRendererComponent,
    updateRenderer: UpdateRendererComponent
}

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

提前致谢，如有任何帮助，我们将不胜感激。

Answer 1

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

像这样 -

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

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

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

现在您可以根据传递的参数值分支 update/delete 逻辑。

单元格渲染器组件example

使用 Angular 8 中的参数函数动态更改 ag-grid 的 Cell Renderer

Dynamically changing Cell Renderer of ag-grid using param function in Angular 8

ag-grid

angular

ag-grid-angular