使用Angular 8中的param函数动态更改ag网格的单元渲染器

Question

有人能帮我吗？我在Angular 8中使用了ag Grid，其中我有一个列，它将单元格渲染器作为一个按钮(比如Delete按钮(，但当网格触发cellValueChange事件时，即当特定单元格值发生变化时，我希望用其他单元格渲染器替换Delete按钮的单元格渲染器。

我在做什么，

columnDefs: {
headerName: 'Delete'
cellRenderer: (params: ICellRendererParams) => {
return getCellRenderer(params);
}
}
getCellRenderer(params)
{
if (params.value.isEdit)
return 'updateRenderer';
else
return 'deleteRenderer';
}

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

因此，此函数应该返回渲染器。我创建了如下框架组件：

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
}

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

单元渲染器组件示例

Answer 2

以下是在最新版本的AgGrid中如何做到这一点。

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

Answer 3

您可以在Javascript上使用cellRendererSelector实现相同的功能，如下所示：

const columnDefs = [
{
headerName: "Name",
field: "user.name",
// apply the condition and render the component
cellRendererSelector: (params) =>
params.data.orders && { component: "agGroupCellRenderer" }, 
},
// ...rest of the items

]