Блог

Я пытаюсь написать пользовательский редактор ячеек для agGrid, реализованный в Angular. В моей сетке я показываю значение объекта в пределах моего узла, доступное для чтения пользователем, но у объекта есть 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 возвращать больше значения ячейки, чтобы я мог обновить ячейку, а также дополнительное значение?

Возможно, у меня есть решение для вас, но я не уверен, что это лучшая практика. В принципе, с помощью getValue метода мы можем просто вернуть весь объект целиком. Однако в основной ag-grid мы должны вызвать свойство CellRenderer таким образом, чтобы мы отображали свойство object (например, 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-grid определена таким образом с помощью columnDefs:

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

В вашем app.component.ts вы можете включить свойство CellRenderer, чтобы выбрать свойство, которое вы хотите отобразить в своей ячейке! Я добавил оператор if для проверки params , поскольку CellRenderer может выдать ошибку, если params или params.value является undefined

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