Angular NgRx Store TypeError: Невозможно назначить только для чтения свойство 'primary' объекта '[object Object]' - PullRequest
Новая
       137

Angular NgRx Store TypeError: Невозможно назначить только для чтения свойство 'primary' объекта '[object Object]'

0 голосов
/ 06 августа 2020

У меня есть массив объектов в хранилище 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'} ]

При извлечении данных из хранилища я назначаю указанный выше массив свойству внутри моего компонента.

Я использую приведенные выше данные для элементов от l oop до HTML, чтобы заполнить их существующей информацией с помощью *ngFor

Когда я пытаюсь изменить данные (например, щелкнув кнопку, чтобы включить указанную c значение «первичного» ключа на противоположное (т.е. 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, но с той же ошибкой продолжает происходить.

Я полностью осознаю, что данные внутри хранилища неизменны, если они не управляются в редукторе (и с этим не возникает никаких проблем).

Я попробовал ed просматривает другие ответы аналогичного характера, но, похоже, ни у кого нет такой же проблемы.

Как мне получить данные из магазина, назначить их свойству локально и изменить эти данные без выше ошибка?

Обновление 1:

Дополнительные данные 

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

1 Ответ

1 голос
/ 06 августа 2020

Ваша проблема - 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 }));
...