Angular agGrid自定义单元编辑器；将对象返回到角度分量

我正试图为Angular中实现的agGrid编写一个自定义单元格编辑器。在我的网格中，我在我的节点中显示了一个对象的用户可读值，但是该对象有一个

id

，它在我的角度应用程序中使用。我正在尝试创建一个编辑器，用户可以在其中仅选择用户可读的值，但编辑器将返回这两个值，以便我的应用程序组件可以使用其

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

值

我考虑过一些事情：

• 重新设计行数据，使城市既是

  id

  的对象，也是

  city

  的对象，然后我可以将

  selectedCity

  作为直接匹配返回。但是我不认为agGrid可以在单元格中保存一个对象，并且只显示它的一个属性编辑。我意识到定制的cellRenderer可能会支持这一点

• 在我的应用程序组件中使用

  getCellEditorInstances（params）

  获取

  selectedCity

  的值，但是这似乎很难，因为

  selectedCity

  是在

  stopEditing（）时设置的

  此外，我还需要找到我正在编辑的节点，以设置听起来不像是可靠解决方案的值

---

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

我可能会为您提供解决方案，但我不确定这是否是最佳做法。基本上，在

getValue

方法中，我们可以简单地返回整个对象。但是，在主ag网格上，我们必须调用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上，您的ag网格可能是通过columnDefs定义的：

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

---

您的自定义单元格是否包含某种下拉菜单？不，它本身就是一个网格。因此它可以依赖于显示给定id的正确城市值。。好的，让我跟你澄清一下。您试图实现的是，您希望从

allCitiesRowData

返回所选对象，对吗？这样，返回的值不仅包含id，还包含其他属性，如

id

和

city

？返回的值将在app.component.ts中使用，这是可能包含您的主要ag网格的主/父组件？是的，这似乎是正确的。现在（在最初发布我的问题之后），我正试图通过将

cityObject

与

id

和

city

作为

rowData

中的值，然后使用

cellRenderer

在我的单元格中仅显示

cityObject.city

来实现这一点。这样，我就可以在我的

cellEditor

中返回

citySelected

（这是从

allCitiesRowData

中选择的内容），而不会破坏我的模型/对象。是的，它成功了！谢谢

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;
      }
    },
  },
]