angular - AG-Grid:无法更新 Grid 中的字段，因为它是只读的

Question

我正在尝试更新 ag-grid 中的字段，但它不断返回 ERROR TypeError: Cannot assign to read only property 'quantity' of object '[object Object]'。

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

我正在使用来自 ngrx 存储的 observable 来填充 rowData，如下所示:

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

我已经检查了上述内容，我可以通过说 this.orders.products = [] 来更新这个对象，这对我来说它不再是不可变的。

 <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 设置值，但仍然遇到相同的错误。

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


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

}

Answer 1

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

默认情况下，当您将网格中的列设置为可编辑时，它会尝试直接更新支持对象，这就是您看到的问题 - 网格会尝试改变不可变对象(immutable对象)。

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

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