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

Question

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

[ {email: 'firstemail@domain.com', primary: true, type: 'WORK'}, 
  {email: 'secondemail@domain.com', primary: true, type: 'WORK'}, 
  {email: 'thirdemail@domain.com', 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 属性中，但同样的错误不断发生。

我完全意识到存储中的数据是不可变的，除非在减速器中进行管理（并且不会出现任何问题）。

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

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

更新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 }));