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>

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

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

我想念什么？

我正在使用Ag-grid版本：17.1.0 角度：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

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

1 个答案: