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

Question

我正在尝试为 Angular 中实现的 agGrid 编写自定义单元格编辑器。在我的网格中，我在我的节点中显示了一个对象的用户可读值，但该对象有一个 id，它在我的 Angular 应用程序中使用。我正在尝试创建一个编辑器，用户可以在其中 select 仅基于用户可读值，但编辑器 return 这两个值，以便我的应用程序组件可以使用其 id。

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

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

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

在我的外部编辑器组件中，我有一个 select 的数据集，来自：

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

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

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

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

但在这种情况下，我显然没有 return 编辑 id 并且我的 rowData 节点将不会正确更新。如果我 returned selectedCity.id 或 selectedCity 编辑的单元格将不会显示 selectedCity.city.

的用户可读值

我考虑过的一些事情：

重新设计 rowData，使城市成为 id 和 city 的对象，然后我可以将 return 和 selectedCity 作为直接比赛。但是我不认为 agGrid 可以在一个单元格中保存一个对象并且只显示它的一个属性。编辑。我意识到自定义 cellRenderer 或许可以支持这一点。
在我的应用程序组件中使用 getCellEditorInstances(params) 来获取 selectedCity 的值，但这似乎很难，因为 selectedCity 是在 stopEditing() 时设置的而且我还需要找到我正在编辑的节点来设置在我看来不是一个可靠解决方案的值。

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

Answer 1

我可能有适合您的解决方案，但我不确定这是否是最佳做法。基本上，在 getValue 方法上，我们可以简单地 return 整个对象。但是，在主 ag-grid 上，我们必须调用 cellRenderer 属性，这样我们只在单元格本身上显示对象属性（例如，city）。

在您的外部 editor.component.ts 上，您可以 return 整个对象：

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-angular [columnDefs]="columnDefs" ...> </ag-grid-angular>

在您的 app.component.ts 上，您可以将 cellRenderer 属性添加到 select 您想要显示在单元格上的属性！我添加了一个 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 组件

agGrid custom cell editor; returning object to Angular component

ag-grid

angular