为什么在不提交表单的情况下编辑表单的 [(NgModel)] 输入时 BehaviorSubject 会发生变化？答案

【问题标题】：Why does BehaviorSubject change when editing [(NgModel)] inputs of a form without submitting the form?为什么在不提交表单的情况下编辑表单的 [(NgModel)] 输入时 BehaviorSubject 会发生变化？
【发布时间】：2019-03-25 17:30:36
【问题描述】：

我有一个从 BehaviorSubject 加载用户信息的表单。如果我编辑此表单上的任何输入并离开页面而不点击提交，则无论如何都会在主题中更新用户信息。

当我没有在 BehaviorSubject 上调用 next() 时，我不明白为什么要更新主题。

===主题类===

userDataReceiver$: Observable<UserModel>;
private userDataObserver = new BehaviorSubject(null);

constructor() {
    this.userDataReceiver$ = this.userDataObserver.asObservable();
}

 sendUserDataToSubscriber(data: UserModel) {
    this.userDataObserver.next(data);
}

===用户类===

userDataReceiver: Subscription;

ngOnInit() {
    this.userDataReceiver = this.observerService.userDataReceiver$
    .subscribe(res => this.user = res);
}

ngOnDestroy() {
      this.userDataReceiver.unsubscribe();
}

this.user 在 html 页面上的表单中用于加载/保存用户数据。如果在 html 页面中编辑输入而不保存表单，则离开页面仍然会导致用户对象被更新。导航回 html 页面将显示更新后的用户输入。

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您的表单控件似乎绑定到 BehaviorSubject 发出的 UserModel 对象的属性。所以修改控件中的值会修改用户。由于您有一个 BehaviorSubject，下次订阅时，您将获得完全相同的 userModel 对象，以及修改后的属性。

如果不希望表单修改存储在 BehaviorSubject 中的 UserObject，则制作对象的递归副本，并将该副本的属性绑定到表单中。

【讨论】：