Angular Ag-grid cellRendererFramework - 组件中的修改未反映在网格rowData中

Question

我在 app.component 中有一个可编辑的网格，其中一列是 CellRendererFramework：

createColumnDefs() {
    return [
      { headerName: 'First Name', field: 'firstName', editable: true },
      { headerName: 'Last Name', field: 'lastName', editable: true },
      { headerName: 'Email', field: 'email', editable: true },
      { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent },
    ];
  }

组件定义如下：

import { Component, OnInit } from '@angular/core';
import { User, DataService } from './data.service';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-combo-box',
  templateUrl: './combo-box.component.html',
  styleUrls: ['./combo-box.component.css']
})
export class ComboBoxComponent implements OnInit, ICellRendererAngularComp {

  users: User[] = [];
  admins: any;

  constructor(private dataservice: DataService) {}

  ngOnInit() {
    this.users = this.dataservice.getAdminUsers();
  }

  refresh(params: any): boolean {
    return false;
  }

  public params: any;

  agInit(params: any): void {
      this.params = params;
      this.admins = this.params.value;
  }


  public getFollows(){
    return this.admins;
  }

  onChange(evt){
    this.admins = evt.value;
  }

}

模板“combo-box.component.html”是启用了多选选项的材料选择。

<mat-form-field>   <mat-select multiple [(value)]="admins" (selectionChange)="onChange($event)">
    <mat-option *ngFor="let user of users | async" [value]="user.firstName">{{user.firstName}}</mat-option>   </mat-select> </mat-form-field>

我应该能够更改多选中的数据，然后在外部按钮的 clic 上，我应该保存网格数据。我面临的问题是，每当我更改多选选项然后尝试保存时，它总是显示最初绑定的多选值。

所以基本上，ComboBoxComponent 中的任何更改都不会更改 rowData。因此，我无法在修改后保存回网格数据。

我错过了什么？

我正在使用 Ag-grid 版本：17.1.0 角度：6.0.3

Answer 1

原因是，当您的ComboBoxComponent 实现ICellRendererAngularComp 并且您已经给出colDef { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent } 时，它是一个单元格渲染器，而不是单元格编辑器。它的目的只是显示数据。

如果您想更改rowData，您必须创建自定义编辑器并将其提供为cellEditorFramework。

看看这个例子 plunk：ag-grid angular custom editor component

如您所见，mood 字段具有自定义渲染器和自定义编辑器来进行更改。

{
    headerName: "Mood",
    field: "mood",
    cellRendererFramework: MoodRendererComponent,
    cellEditorFramework: MoodEditorComponent,
    editable: true,
    width: 300
}

还要注意MoodEditorComponent 实现了ICellEditorAngularComp。

如需更多参考，ag-grid Editor Components