редактирование данных формы с angular 9 и с ошибкой ngrx - PullRequest
Новая
       9

редактирование данных формы с angular 9 и с ошибкой ngrx

0 голосов
/ 27 марта 2020

Я пытаюсь реализовать редактирование формы, используя angular и ngrx. Я могу получить доступ к данным формы, используя ngrx и передавая дочерний компонент, и он отображается нормально. Но когда я пытался отредактировать поле, я получаю «ОШИБКА TypeError: Невозможно назначить только для чтения свойство« #fieldname »объекта« [object Object] '». Ниже приведен фрагмент кода, который я использую.

Родительский компонент: 

 ngOnInit(): void {
   this.formData$ = this.store.pipe(select(fromData.getData));
 }

<app-child [afeData]="formData$ | async">
</app-child>

Дочерний компонент 

  <label>Name</label>
  <input id="input" type="text" [(ngModel)]="formData.name">
  <button type="button" (click)="SubmitData($event);" label="Save"></button>

Когда я выполняю глубокое клонирование данных формы ответа, используя JSON .parse, как показано ниже на родительском компоненте, тогда он работает отлично. Есть ли лучший способ достичь этого без глубокого клонирования объекта? 

 ngOnInit(): void {
      this.store.pipe(select(fromData.getData)).subscribe(res =>{
          this.fromData = JSON.parse(JSON.stringify(res)); 
   });


 }

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Идея такого редукционного хранилища, как ngrx, состоит в том, чтобы реактивно использовать ваше приложение.

event -> store -> view

Вы используете действие для обновления хранилища и Селектор с помощью observable получает его данные.

Таким образом, вам нужно разделить доступ к вашему компоненту с [(ngModel)] = "formData.name" на что-то вроде [ngModel] = "formDataname" (change) = "onChange ( $ event) ".

Лучше всего с NgRx использовать реактивные формы.

0 голосов
/ 27 марта 2020

Думаю, пришло время начать использовать _loda sh, _.cloneDeep () docs

...