使用 Angular 8 中的 param 函数动态更改 ag-grid 的 Cell 渲染器

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。

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

frameworkComponent: {
    deleteRenderer: DeleteRendererComponent,
    updateRenderer: UpdateRendererComponent
} 

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

提前致谢，任何帮助将不胜感激。

Answer 1

以下是在最新版本的 AgGrid 中执行此操作的方法。

cellRendererSelector: (params) => {
  if (params.value.isEdit) {
    return {
      component: 'updateRenderer',
      params: {} // optional parameters
    };
  } else {
    return {
      component: 'deleteRenderer',
      params: {} // optional parameters
    };
  }
}

Answer 2

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

像这样的东西 -

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

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

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

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

单元格渲染器组件示例