angular中的FormGroup如果通过valueChanges相互侦听，则无法正确看到其子对象的单个更改

我有一个简单的情况。有一个包含两个字段的html表单：

• 名字
• 姓氏

我希望

lastName

在用户更改

firstName

时更改某些内容。我通过在Angular（8）中观察到的值变化来实现它

此外，我还有两个订阅用于侦听和记录更改：

• 一张完整的表格
• 一个在

  lastName

以下是它的实现方式：

ngOnInit（）{
this.form=new FormGroup({
firstName:newformcontrol（“”，{updateOn:'blur'}），
lastName:newformcontrol（“”，{updateOn:'blur'}），
});
this.form.get（'lastName'）.valueChanges.subscribe（value=>console.log（'lastName'，value））；
订阅（value=>console.log（'value'，value））；
this.form.get（'firstName'）.valueChanges
.subscribe（firstName=>{
this.form.get（'lastName'）.setValue（`firstName${firstName}${new Date（）.getmillizes（）}`）；
});
}

一般来说，从用户的角度来看，这与预期一样。用户更改

firstName

，然后

lastName

更改自身

但当我查看控制台日志时，我得到的是：

lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}
Value > {firstName: "test", lastName: "firstName test 850"}

我希望整个日志中有两个日志，但第一个更改了名字，第二个更改了姓氏。 更像这样：

Value > {firstName: "test", lastName: ""}
lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}

这里有一个完整的例子

好的，所以当我改变一种方式时，我更新了

lastName

：

this.form.get('lastName').setValue(`firstName ${firstName} ${new Date().getMilliseconds()}`);

为此：

setTimeout(() => this.form.get('lastName').setValue(`firstName ${firstName} ${new Date().getMilliseconds()}`));

然后日志按我预期的顺序排列：

Value > {firstName: "test", lastName: ""}
lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}

然而，

setTimeout

在这里似乎是个棘手的黑客。 下面是全部代码

问题是: 这是怎么回事？为什么FormGroups是这样工作的？ 是否有一种模式可以以角度处理此类事件（当一种形式影响另一种形式时）？

这就是事件循环的工作方式 在这两种情况下发生了什么：

无设置超时

用户集名

firstName.valueChanges

被添加到

EventLoop

队列中

EventLoop

运行并调用操作

firstName.valueChanges

调用

lastName.setValue

lastName.setValue

将

lastName.valueChanges

和

form.valueChanges

添加到事件循环队列

lastName.valueChanges

将

form.valueChanges

添加到eventLoop队列

lastName.valueChanges

已退出队列

form.valueChanges

（from

lastName.valueChanges

）已退出队列

form.valueChanges

（from

firstName.valueChanges

）已退出队列

设置超时

用户集名

firstName.valueChanges

被添加到

EventLoop

队列中

EventLoop

运行并调用操作

firstName.valueChanges

setTimeout（lastName.setValue）

不会被调用，而是添加到事件循环队列中

firstName.valueChanges

向事件循环队列添加

form.valueChanges

setTimeout

退出队列，他设置

lastName

值，并将

lastName.valueChanges

添加到事件循环队列中

form.valueChanges

（from

firstName.valueChanges

）已退出队列

lastName.valueChanges

退出队列，并将

form.valueChanges

添加到事件循环队列中

form.valueChanges

（from

lastName.valueChanges

）已退出队列