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

【问题标题】：agGrid custom cell editor; returning object to Angular componentagGrid 自定义单元格编辑器；将对象返回给 Angular 组件
【发布时间】：2019-08-04 21:43:40
【问题描述】：

我正在尝试为在 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' },
    ];

当用户选择我的编辑器组件时，将使用id 和city 创建一个对象selectedCity，例如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 单元格编辑器中，我可以返回超过单元格的值，以便我可以更新单元格以及辅助值吗？

【问题讨论】：

您的自定义单元格是否包含某种
不，它实际上是一个独立的网格。所以它可以依靠
嗯.. 好的，让我和你澄清一下。您想要实现的是，您想从allCitiesRowData 返回选定的对象，对吗？这样返回值不仅包含 id，还包含其他属性，例如 id 和 city?返回的值将在 app.component.ts 中使用，它是可能包含您的主要 ag-grid 的主/父组件？
是的，这似乎是正确的。现在（在最初发布我的问题之后）我试图通过将cityObject 与id 和city 作为rowData 中的值来实现这一点，然后使用cellRenderer 在我的细胞。这样我就可以在我的cellEditor 中返回citySelected（这是从allCitiesRowData 中选择的）并且不会破坏我的模型/对象。
是的，成功了！谢谢

标签： angular ag-grid

【解决方案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;
      }
    },
  },
]

【讨论】：