Ag-grid：动态启用/禁用单元格编辑（基于另一个字段）答案

【问题标题】：Ag-grid: make cell editing enabled/disabled dynamically (based on another field)Ag-grid：动态启用/禁用单元格编辑（基于另一个字段）
【发布时间】：2019-05-14 20:30:36
【问题描述】：

我在 Angular 中使用 ag-grid，使用全行编辑。我想根据另一个字段禁用对其中一个字段的编辑，但我希望在另一个字段的值更改后立即禁用/启用该字段（而不是在编辑停止后）。

我在这里用一个简单的例子重新创建了我的场景：如果 ID 值大于 0，则启用 Value 字段，否则，禁用 Value 字段。

<div style="width: 200px;">
    <ag-grid-angular #agGrid style="height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
    private gridOptions: GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          // enable filtering 
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "id",
                width: 100,
                editable: true
            },
            {
                headerName: "Value",
                field: "value",
                width: 100,
                editable: true
            },

        ];
        this.gridOptions.rowData = [
            {id: 5, value: 10},
            {id: 10, value: 15},
            {id: 15, value: 20}
        ]
        this.gridOptions.rowSelection='single';
        this.gridOptions.editType='fullRow';
    }
}

Here 是我的问题的 SlackBlitz。

我怎样才能做到这一点？我一直在使用计算来获取ID 的值，每次它更改它总是得到保存的值，而不是刚刚输入的值。我还尝试了 ag-grid 提供的许多事件挂钩，例如 rowValueChanged 和 rowEditingStopped，但它们仅在您停止编辑时才被调用，而不是在发生变化时调用。

【问题讨论】：

editable: ()=>false ，所以你可以在这里查看之前的单元格和返回条件
@ABOS 我希望在其他字段的值更改后立即禁用/启用该字段（而不是在编辑停止后）
ag grid文档页面有很多事件钩子，你试过了吗？
@ABOS 是的，我有，请参阅更新后的问题。
我没有看到任何简单的方法可以使用 ag 网格中的开箱即用选项切换第二个单元格。我尝试从 id 列中抓取输入元素，然后添加事件侦听器以观察其值的变化。然后查询行对象并切换第二个单元格的状态。也许这可以工作，但工作量很大

标签： angular ag-grid

【解决方案1】：

你可以这样处理：

editable: (params)=>{return params.data["id"]>0}

但这种情况不会像您预期的那样完美运行（可编辑功能将仅在编辑开始事件时执行，而编辑它不会跟踪您的更改）

为了完全满足您的要求，您必须创建自定义 cellEditors 以在“实时”更改中进行验证

您可以查看this post 以获取有关验证的更多信息

【讨论】：