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

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

的现有信息填充它们

当我尝试更改数据时（例如单击按钮将特定 'primary' 键的值变为相反的值（即 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 属性但同样的错误不断出现。

我完全知道 store 中的数据是不可变的，除非在 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 }));

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

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

angular

typescript

ngrx

ngrx-store