AG-Grid：由于只读而无法更新Grid中的字段 [英] AG-Grid: Cannot update field in Grid as it is read only

问题描述

我正在尝试更新ag-grid中的一个字段，并且该字段不断出现错误TypeError：无法分配为只读对象'[object Object]'的属性'quantity'。

I am trying to update a field in ag-grid and it keeps coming back with ERROR TypeError: Cannot assign to read only property 'quantity' of object '[object Object]'.

它允许我编辑单元格，但是当我尝试更新它时会出现此错误。

It allows me to edit the cell but when i try to update it comes up with this error.

我正在使用ngrx存储中的一个可观察对象来填充rowData，如下所示：

I am using an observable from an ngrx store to populate the rowData as below:

this.order$.subscribe(order => {
            this.order = { ...order, products: [...order.products] };
        });

我已经检查了上面的内容，可以通过说this.orders.products = []更新此对象。

I have checked the above and I can update this object by saying this.orders.products = [] which says to me it is no longer immutable.

 <mi-ag-grid [data]="order.products" [columnDefs]="columnDefs" [suppressClickEdit]="false"></mi-ag-grid>

columnDefs = [
        {
            headerName: 'Code',
            field: 'code',
            width: 150
        },
        {
            headerName: 'Name',
            field: 'name',
            width: 200,
            editable: true
        },
        {
            headerName: 'Quantity',
            field: 'quantity',
            width: 150,
            editable: true
        }
    ];

我接下来尝试了@GreyBeardedGeek的建议，并尝试按照下面的方式使用valueSetter设置值，但仍然

I next tried suggestion from @GreyBeardedGeek and tried to set value with a valueSetter as per below, but still getting same error.

,
    {
        headerName: 'Quantity',
        width: 150,
        editable: true,
        field: 'quantity',
        valueSetter: quantityValueSetter
    },


function quantityValueSetter(params): any {
console.log(params);
params.data.quantity = params.newValue;

}

推荐答案

从商店获取并在网格中使用的对象是不可变的。

The object that you are getting from the store and using in the grid is immutable.

默认情况下，当您使网格中的列可编辑时，它会尝试直接更新支持对象，这就是您所看到的问题-网格试图使不可变对象发生变异。

By default, when you make a column in the grid editable, it will attempt to update the backing object directly, and this is the problem that you are seeing - the grid attempts to mutate an immutable object.

解决方案是添加一个网格列定义的 valueSetter属性。此属性的值应该是一个将接收新值的函数，然后使用该新值来更新商店。

The solution is to add a "valueSetter" property to the grid column's definition. The value of this property should be a function that will receive the new value, and then use that new value to update the store.

设置了此属性后，ag -grid不会尝试直接更新对象。

When you have this property set, ag-grid will not try to update the object directly.

这篇关于AG-Grid：由于只读而无法更新Grid中的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！