Question

Angular NgRx Store TypeError：无法分配给对象'[object Object]'的只读属性'primary'

2020-08-06

8090

angular typescript ngrx ngrx-store

我在 NgRx 存储中有一个对象数组，如下所示：

[ {email: '[email protected]', primary: true, type: 'WORK'}, 
  {email: '[email protected]', primary: true, type: 'WORK'}, 
  {email: '[email protected]', primary: true, type: 'WORK'} ]

从存储中检索数据时，我将上述数组分配给我的组件内的属性。

我使用上述数据循环遍历 HTML 元素，以使用 *ngFor

用现有信息填充它们>

当我尝试更改数据（例如，单击按钮将特定的“主”键的值变为相反的值（即 true 变为 false 而 false 变为 true））时，数据无法更改，因为出现以下错误：

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

以下是代码：

// Get data from store and assign to local property
this.myData = this.store$.existingData;

<div class="form-element" *ngFor="let email of myData; let index = index">
    <input type="text" placeholder="Email Address" [(ngModel)]="email['email']" />
</div>

我尝试将 this.myData 重新分配给另一个属性，然后循环遍历该属性，以及使用 Object.assign 从存储中获取数据并将其放入 this.myData 属性中，但同样的错误仍然存在发生。

我完全清楚，除非在 Reducer 内进行管理，否则存储内的数据是不可变的（并且这样做不会出现任何问题）。

我尝试查看其他类似性质的答案，但似乎没有人遇到完全相同的问题。

如何从存储中获取数据，在本地将其分配给属性，并更改该数据而不会发生上述错误？

更新 1：

其他数据

this.StoreSubscription = this.store.subscribe(state => {
      this.store$ = state.consumer;
    });

Answer 1

您的问题是 ngModel 。在不了解代码的情况下，您应该执行类似这样的操作，否则 ngModel 指令会尝试写入不可变电子邮件数据对象中的值：

<input [ngModel]="email['email']" (ngModelChange)="onEmailChange(email, $event)">


onEmailChange(email: EmailData, newEmail: string): void {
  // call action to store to update email object with `newEmail` in store
}

要使您的对象不再不可变（浅显地），您可以执行以下操作：

this.myData = this.store$.existingData.map((email) => ({ ...email }));

Answer 2

也有类似的问题。通过传递对象的克隆而不是参考来解决它。

376628581

SL_Riverwolf

2024-04-08