微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angular – Reactive Forms双向绑定错误:无法分配给只读属性

我试图通过以下代码实现双向绑定:

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:一旦表单出现,就不能在控制台中分配给对象'[object Object]’的只读属性’subscribed’.知道为什么吗?

解决方法

this.modifiedUser原来确实是只读的.我不得不简单地制作用户对象的深层副本来解决问题.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐