Question

Angular2/Typescript/ngRx - TypeError：无法分配给对象的只读属性

2017-06-27

11830

javascript angular typescript redux ngrx

在构造函数中我做了类似的事情

selectedDate: Object;
// construtor
this.selectedDate = {};
this.selectedDate['date'] = new Date();
this.selectedDate['pristine'] = new Date();

在另一个按钮单击时调用的函数中我执行以下操作：

this.selectedDate['date'] = new Date(this.selectedDate['pristine']);

然后我收到以下错误：

TypeError: Cannot assign to read only property 'date' of object '[object Object]'

Answer 1

感谢 Ryan Q：

正如 Ryan 所说，我在我的应用中使用了 ngRx，并且我确实通过操作将 this.selectedDate 对象传递到存储中，因此我无法修改存储在 State 中的对象。

解决此问题的一种方法是传递一个新的对象引用，这应该可以解决问题：

this.store.dispatch(new settime.DateChangeAction(Object.assign({}, this.selectedDate)));

Answer 2

@vikas 的回答让我走上了解决类似问题的正确轨道。

我正在尝试处理上传，我想在其中显示进度：
- 从 UploadComponent ，我向父组件发出一个事件
- 父组件向商店发送一个操作
- 效果捕获该操作，调用服务上传文件（返回一个包含两个可观察对象的数组： progress$ 和 result$ ）
- 效果发送一个包含可观察对象的 HttpProgress 操作

此时我遇到了类似的问题。在深入研究商店冻结代码后，我和同事发现它还深度冻结了 action.payload 。因此，传递可观察对象会导致错误，因为可观察对象的状态在内部发生了变化。

我不使用有效负载将其保存到存储中，只是为了可以在组件内注册到actions$，因此在这里，如果我将可变对象传递到有效负载中，这并不重要。为了避免该错误，我只是将可观察对象包装到函数中，因为深度冻结不会冻结函数。