角Ag-栅格cellRendererFramework -网格rowData中未反映的元件的修改
角Ag-栅格cellRendererFramework -网格rowData中未反映的元件的修改
提问于 2018-06-30 13:11:39
我在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;
}
}模板‘como-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>我应该能够改变数据在多个选择，然后在循环的外部按钮，我应该保存网格数据。我面临的问题是，每当我更改多选择选项，然后尝试保存时，它总是显示最初绑定的multiselect的值。
因此，基本上，ComboBoxComponent中的任何更改都不会改变rowData。因此，我无法保存修改后的网格数据。
我遗漏了什么？
我使用的是Ag版本: 17.1.0角: 6.0.3
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-30 19:07:37
原因是，由于您的ComboBoxComponent实现了ICellRendererAngularComp，并且您已经给出了colDef { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent }，所以它是一个单元呈现器，而不是单元编辑器。它的目的只是为了显示数据。
如果要对rowData进行更改，则必须创建自定义编辑器并将其作为cellEditorFramework提供。
请看下面的示例plunk：ag-网格角自定义编辑器组件
如您所见，字段mood有自定义呈现程序和自定义编辑器来进行更改。
{
headerName: "Mood",
field: "mood",
cellRendererFramework: MoodRendererComponent,
cellEditorFramework: MoodEditorComponent,
editable: true,
width: 300
}还请注意，MoodEditorComponent实现了ICellEditorAngularComp。
如需更多参考，请参阅ag-网格编辑器组件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51115233
复制相关文章
相似问题
腾讯云开发者
