我在Angular 6应用程序中使用的是“ AG Grid”社区版。
我现在面临的挑战是:我有一个相当简单的数据结构,其中的一个列表绑定到网格上进行显示。根据其值,我想在网格中添加“操作”列,以使用户可以访问某些操作,例如删除条目,“推广”它,等等。
对于单独的数据绑定列,当绑定时,我会得到每一行的相应数据值,例如使用单元格渲染器设置显示格式。我希望我能够做到与“动作”列(未绑定到该类的特定数据元素)类似的操作-但看来我的“动作单元格渲染器”没有任何基础它的决定。
我有一个类似这样的数据结构:
export interface Indicator {
Id: string;
Name: string;
IsGlobal: boolean;
}
在我的Angular组件的Indicators
函数中,这些OnInit
的数组已绑定到AG网格。
我将AG网格的列定义为:
columnDefs = [
{ headerName: 'Name', field: 'Name', width: 200, editable: true },
{ headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
cellRenderer: (data) => {
// here, "data" refers to the "IsGlobal" value of the row being displayed
if (data.value === true) {
return 'Ja';
} else {
return 'Nein';
}
},
},
{ headerName: 'Actions', width: 125,
cellRenderer: (data) => {
// here, I was hoping the "data" would refer to the entire
// row / object being bound, so that I could check for
// certain conditions to be true (or false)
if (data.IsGlobal.value === true)
{
return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
'<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
}
else
{
return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
}
}
}
];
我希望能够在列定义中定义我的操作列显示“升级条目”按钮仅在的情况下,当前相关行的数据具有IsGlobal = false
。我希望将data
传递到单元格渲染器中是整个行数据对象(类型为Indicator
)-但这似乎并非如此。
如何确定要在“操作”列中的列定义中显示哪些图标?
答案 0 :(得分:3)
在cellRenderer
上-您将获得params
值,该值代表一个对象:
interface ICellRendererParams {
value: any, // value to be rendered
valueFormatted: any, // value to be rendered formatted
getValue: ()=> any, // convenience function to get most recent up to date value
setValue: (value: any) => void, // convenience to set the value
formatValue: (value: any) => any, // convenience to format a value using the columns formatter
data: any, // the rows data
node: RowNode, // row rows row node
colDef: ColDef, // the cells column definition
column: Column, // the cells column
rowIndex: number, // the current index of the row (this changes after filter and sort)
api: GridApi, // the grid API
eGridCell: HTMLElement, // the grid's cell, a DOM div element
eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
columnApi: ColumnApi, // grid column API
context: any, // the grid's context
refreshCell: ()=>void // convenience function to refresh the cell
}
因此,要访问row-data
,您需要使用params.data
或params.node.data
cellRenderer: (params) => {
if (params.data.IsGlobal.value === true)
{
...
}
else
{
...
}
}
但是请记住,当您使用内联cellRenderer
时-您仅可以实现HTML
模板,就逻辑处理而言,您需要创建自定义cellRenderer
,其中将包含所需的功能,依此类推。
您将无法执行
component
函数,而这些函数将抛出cellRenderer
内联实现