无法更改从 API 获得的数据，错误：无法分配给只读属性答案

【问题标题】：Cannot change data I get from API, ERROR: Cannot assign to read only property无法更改从 API 获得的数据，错误：无法分配给只读属性
【发布时间】：2017-11-10 03:51:36
【问题描述】：

我通过 API 调用 获取一些数据

 getPosts(postRequest: PostRequest): void {    
    this._postService.getPosts(postRequest).subscribe(result => {    
      const postList = result as PostList
      this.posts = postList.posts    
    });    
  }

this.posts，包含一个帖子对象数组。在这种情况下看起来像这样：

{
    id: 123
    rating: {
      datetime: 1496782640,
      down:0,
      hot:8061.5151856,
      id:344,
      up:2
    }
}

稍后我想更改项目

  incrementVote(post: Post) {
      post.rating.up++;        
  }

错误：

main-browser.min.js:2 ERROR TypeError: Cannot assign to read only property 'up' of object '[object Object]'
    at PostListComponent.incrementVote (main-browser.min.js:34)
    at PostListComponent.vote (main-browser.min.js:34)
    at Object.handleEvent (main-browser.min.js:54)
    at Object.handleEvent (main-browser.min.js:6)
    at Object.handleEvent (main-browser.min.js:7)
    at dispatchEvent (main-browser.min.js:5)
    at main-browser.min.js:5
    at HTMLButtonElement.<anonymous> (main-browser.min.js:21)
    at ZoneDelegate.invokeTask (main-browser.min.js:67)
    at Object.onInvokeTask (main-browser.min.js:3)

为什么 this.posts 对象是只读的？

这似乎是突然发生的，似乎没有对代码进行任何更改。我在另一个项目中也遇到了同样的问题，然后如果我使用 --aot 编译而不是在开发模式下编译时它就可以工作。

我该如何解决这个问题？我需要能够从 API 更改值。为什么会这样？

附言。该对象也在 HTML 中使用，如下所示：

 <div class="row" *ngFor="let post of posts; let postIndex = index">
      <div class="col-md-12">

        <app-post [post]="post" [fontSize]="30"></app-post>

【问题讨论】：

标签： javascript angularjs angular api

【解决方案1】：

好的，尝试不递增而是分配。如：

incrementVote(post: Post) {
      let newVal = post.rating.up + 1;
      post.rating.up = newVal;        
  }

也许post 对象是使用以下之一创建的：

已创建为只读的含义。

Here 我发现用另一个对象替换值是可行的。我不确定它是否可以应用于您的情况。

更新：

另一种解决方案是实际强制属性为可写，例如：

up: {
    value: 2,
    writable: true
},

【讨论】：

仍然有同样的问题，没有尝试添加'可写'，但不能对每个对象都这样做..
@ganjan 考虑一下，您可以创建一个类PostClass，它具有带有writable 的X 属性。然后你只需实例化它，这样你就不必重复 1000 次，只需一次。没有？
也试过设置可写，没有任何区别。

【解决方案2】：

我认为我找到了 readonly 属性的原因。似乎是因为 ngrx/store 库。一旦我使用

    this._store.dispatch({
           type: EVENT_X,
           payload: new EventPayload({
             variable: Something
           })
     });

变量“Something”变为只读。这是有道理的，因为它并不意味着直接使用 ngrx/store 进行更改。

【讨论】：