Question

我正在尝试为在Angular中实现的agGrid编写自定义单元格编辑器。在我的网格中，我显示了节点内对象的用户可读值，但是该对象具有id，该值在整个Angular应用程序中都使用。我正在尝试创建一个编辑器，在该编辑器中，用户只能选择基于用户可读的值，但在该编辑器中返回两个值，以便我的应用程序组件可以使用其id。

例如，在我的应用程序组件中，我有以下columnDefs和rowData：

columnDefs = [
      { headerName: 'City', field: 'city', editable: true, 
          cellEditor: 'cityEditor'},
  ];

rowData = [
      { 'id': 1, 'city': 'Paris' },
      { 'id': 4, 'city': 'Amsterdam' },
  ];

在我的外部编辑器组件中，我有一个数据集可供选择：

allCitiesRowData = [
        { 'id': 1, 'city': 'Paris', 'country': 'France' },
        { 'id': 2, 'city': 'London', 'country': 'United Kingdom' },
        { 'id': 3, 'city': 'Berlin', 'country': 'Germany' },
        { 'id': 4, 'city': 'Amsterdam', 'country': 'The Netherlands' },
    ];

当用户选择我的编辑器组件时，使用selectedCity和id（例如city）创建对象selectedCity = { 'id': 4, 'city': 'Amsterdam' }。

调用stopEditing()时，我只能返回1个值，例如：

getValue(): any {
    return this.selectedCity.city;
}

但是在这种情况下，我显然没有返回id，并且我的rowData节点将无法正确更新。如果我返回了selectedCity.id或selectedCity，则编辑后的单元格将不会显示用户可读的selectedCity.city值。

我考虑过的一些事情

重新设计rowData，以使城市同时是id和city的对象，然后我可以返回selectedCity作为直接匹配项。但是我不认为agGrid可以在一个单元格中容纳一个对象，而只显示其属性之一。编辑。我意识到自定义的cellRenderer也许可以支持这一点。
在我的应用程序组件中使用getCellEditorInstances(params)来获取selectedCity的值，但这似乎很困难，因为selectedCity是在stopEditing()时设置的，而且我会需要找到我正在编辑的节点来设置对我来说听起来不像一个健壮的解决方案的值。

在agGrid单元格编辑器中，我是否可以返回比单元格更多的值，以便可以更新单元格以及辅助值？

Answer 1

我可能会为您提供解决方案，但是我不确定这是否是最佳实践。基本上，在getValue方法上，我们可以简单地返回整个对象。但是，在主要的ag-grid上，我们必须调用cellRenderer属性，以便仅在单元格自身上显示对象属性（例如city）。

在external-editor.component.ts上，您可以仅返回整个对象：

getValue(): any {
  //lets assume this.selectedRowData contains the object {id: '1', city: 'Paris'}
  this.value = this.selectedRowData;
  console.log(this.value)
  return this.value;
}

在主app.component.html上，您可能已经用columnDefs这样定义了ag-grid：

<ag-grid-angular [columnDefs]="columnDefs" ...> </ag-grid-angular>

在app.component.ts上，可以包括cellRenderer属性以选择要在单元格上显示的属性！我添加了一条if语句来检查params，因为如果params或params.value是undefined

，cellRenderer可能会抛出错误。

columnDefs = [
  { 
    headerName: 'City', 
    field: 'city', 
    editable: true, 
    cellEditorFramework: ExternalEditorComponent, 
    cellRenderer: (params) => {
      if (params && params.value) {
        console.log(params.value) // this will print the object with id and city
        return params.value.city;
      }
    },
  },
]

agGrid自定义单元格编辑器；将对象返回到Angular组件

1 个答案: