反応フォーム双方向バインディングエラー：私は次のコードを介して、2つの結合方法を達成しようとしている

Question

専用のプロパティを読み取るために割り当てることができません：

export interface User { 
 
    name: string; 
 
    subscribed: boolean; 
 
} 
 

 
export class UserEditComponent implements OnInit { 
 
    modifiedUser: User; 
 
    userForm: FormGroup; 
 

 
    ngOnInit() { 
 
    this.userForm = this.fb.group({ 
 
     name: ['', Validators.required], 
 
     subscribed: false 
 
    }); 
 

 
    this.route.paramMap.switchMap((params: ParamMap) => { 
 
     return this.userService.getUser(params.get('id')); 
 
    }).subscribe((user) => { 
 
     this.modifiedUser = user; 
 
     this.userForm.setValue({ 
 
     name: this.modifiedUser.name, 
 
     subscribed: this.modifiedUser.subscribed 
 
     }); 
 
    }); 
 

 
    this.userForm.valueChanges.subscribe((data) => { 
 
     this.modifiedUser.subscribed = data.subscribed; 
 
    }); 
 
    } 
 
}

<form [formGroup]="userForm"> 
 
    <textarea class="form-control" formControlName="name">{{modifiedUser.name}}</textarea> 
 
    <input type="checkbox" class="custom-control-input" formControlName="subscribed"> 
 
</form>

しかし、私はいつもよフォームが表示されるとすぐにコンソールにエラーTypeError: Cannot assign to read only property 'subscribed' of object '[object Object]'が表示されます。どんな考え？

Answer 1

this.modifiedUserが実際に読取り専用であることが判明しました。この問題を解決するには、userオブジェクトの深いコピーを作成するだけでした。