农业网格中的条件 'field'

Question

是否可以在ag-grid的columnDefs中实现条件字段？我希望只要 rowData 中有 'anotherValue' 就可以为 columnDefs.

中的字段值呈现 'anotherField'

例子我有数据：

this.gridOptions.rowData = [
  { id: 5, value: 10 },
  { id: 10, value: 15 },
  { id: 15, value: 20, anotherValue: 500 },
];

和列定义：

this.gridOptions.columnDefs = [
  {
    headerName: 'ID',
    field: 'id',
    width: 100,
  },
  {
    headerName: 'Value',
    field: 'anotherValue' ? 'anotherValue' : 'value', //this part doesn't work
    cellRendererFramework: RedComponentComponent,
    width: 100,
  },
];

请参阅 stackblitz 示例。非常感谢任何建议。

https://stackblitz.com/edit/angular-ag-grid-angular-hzr31v?file=app/my-grid-application/my-grid-application.component.ts

Answer 1

我不确定它是否支持。如果这是一个选项，您可以修改您的数据：

this.gridOptions.rowData = [
  { id: 5, value: 10 },
  { id: 10, value: 15 },
  { id: 15, value: 20, anotherValue: 500 },
].map(entry => ({
    ...entry,
    value: entry.anotherValue ? entry.anotherValue : entry.value
}));

然后您的网格将始终只是“值”：

this.gridOptions.columnDefs = [
  {
    headerName: 'ID',
    field: 'id',
    width: 100,
  },
  {
    headerName: 'Value',
    field: 'value',
    cellRendererFramework: RedComponentComponent,
    width: 100,
  },
];

查看更新后的 stackblitz：

https://stackblitz.com/edit/angular-ag-grid-angular-w1hnfp?file=app/my-grid-application/my-grid-application.component.ts

Answer 2

您可以使用 valueGetter 而不是 field 作为自定义值。阅读更多关于 valueGetter

this.gridOptions.columnDefs = [
      {
        headerName: 'ID',
        field: 'id',
        width: 100,
      },
      {
        headerName: 'Value',
        valueGetter: this.anotherValueGetter, // THIS PART 
        cellRendererFramework: RedComponentComponent,
        width: 100,
      },
    ];

另一个 ValueGetter 将是一个检查验证的方法。

  anotherValueGetter(params) {
    return params.data.anotherValue? params.data.anotherValue : params.data.value;
  }

见StackBlitz

农业网格中的条件 'field'

Conditional 'field' in ag-grid

ag-grid

angular

ag-grid-angular