javascript - 无法更改从 API 获取的数据，错误 : Cannot assign to read only property

Question

我通过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 更改值。为什么会出现这种情况？

PS。该对象也用在 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>

Answer 1

好吧，尝试不递增而是赋值。如:

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

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

• Object.defineProperty()
• Object.freeze()

这意味着已创建为只读。

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

更新:

另一个解决方案是实际上强制该属性可写，例如:

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