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' 是一个启用了多个 select 选项的 material select。

<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>

我应该可以更改 multi select 中的数据，然后在单击外部按钮时，我应该可以保存网格数据。我面临的问题是每当我更改 multi select 选项然后尝试保存时，它总是显示最初绑定的 multiselect 的值。

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

我错过了什么？

我使用的Ag-grid版本：17.1.0 Angular: 6.0.3

Answer 1

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

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

看看这个例子：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

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

Angular Ag-grid cellRendererFramework - Modification in Component not reflected in grid rowData

data-binding

cellrenderer

ag-grid

angular