angular - AG-Grid:无法更新 Grid 中的字段,因为它是只读的
问题描述
我正在尝试更新 ag-grid 中的字段,但它不断返回错误类型错误:无法分配给对象“[对象对象]”的只读属性“数量”。
它允许我编辑单元格,但是当我尝试更新它时会出现此错误。
我正在使用来自 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;
}
解决方案
您从商店获取并在网格中使用的对象是不可变的。
默认情况下,当您使网格中的列可编辑时,它将尝试直接更新支持对象,这就是您看到的问题 - 网格尝试改变不可变对象。
解决方案是将“valueSetter”属性添加到网格列的定义中。该属性的值应该是一个函数,它将接收新值,然后使用该新值更新存储。
设置此属性后,ag-grid 将不会尝试直接更新对象。
推荐阅读
- javascript - 如何更改引导标签输入的样式
- html - 如何在父元素之外扩展flex容器
- angular - 'ObjectUnsubscribedError object unsubscribed' on valueChanges in custom validator over form
- git - 将更改还原到特定提交
- node.js - 使用 nodejs 和 aws 遇到 403 错误
- javascript - 如何从未命名的 JSON 对象数组中获取数据
- mongodb - 如何计算位于多个数组中的不同对象
- css - 如何使两个 Flex 列表现得像 CSS 中的表格?
- domain-driven-design - 实体真的只能属于一个聚合吗?
- php - 如何在 Magento 2 中从 ui 组件表单获取数据到控制器