Javascript 输入不更新

我正在尝试将数据从一页传输到另一页。但是，当我以编程方式更新输入字段时，如果之后不手动编辑该字段，它将返回一个空字段。我不确定我这样做的方式是否不正确，或者是否有其他方法

我面临的另一个问题是，通常需要点击两次按钮才能更新输入字段。我认为这是一个需要等待API（Arcgis）响应的问题。但是，我不确定如何解决这个问题

HTML

定位

打字稿

details:FormGroup=newformgroup({
类别：新表单控件（“”），
位置：新表单控件（“”）
}
);
当前位置：字符串；
位置：任何；
构造函数（专用路由器：路由器、，
专用地址服务：地址服务服务服务，
) {}
//基于当前位置检索位置
getLocation（）{
//检查是否支持GPS
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（响应=>{
//根据坐标检索地址
this.curLocation=this.addressService.retrieveLocation（响应）；
this.currentPosition=this.curLocation.address.ShortLabel
});
}否则{
警报（“此设备不支持地理位置”）
}
}

地址服务

//检索位置变量
当前位置：任何；
reverseGeo:字符串=”https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=";
//根据坐标检索位置
检索位置（位置：任意）{
this.http.get（this.reverseGeo+position.coords.longitude+%2C“+position.coords.latitude）。订阅（响应=>{
//将响应（对象）转换为类型“any”
this.currentLocation=响应；
});
返回此.currentLocation；
}

您可以使用

ngOnChanges（）

查看输入是否存在。如果所需的

@Input（）

尚未出现，可以使用

*ngIf

暂停HTML。问题是您绑定到value属性，并且还提供了

formControlName

。类似于设置y=x；y=p；期望y都是x，y都是p。其中只有一个将被应用，而不是您希望在应用程序中应用的行为

如上所述，html现在应该是

定位

为了简化代码，我将把

FormBuilder

类注入到我们的构造函数中，并使用它来创建表单

构造函数（…，私有fb:FormBuilder）{}
详细信息=this.fb.group({
类别：[]，
地点：[]
});

接下来要更新该值，只需在FormControl上使用

setValue（）

函数即可

只需更改行

this.currentPosition=this.curLocation.address.ShortLabel到

const currentPosition=this.curLocation.address.ShortLabel；
this.details.get（'location'）.setValue（currentPosition）

您的代码现在应该如下所示

getLocation（）{
//检查是否支持GPS
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（响应=>{
//根据坐标检索地址
控制台日志（“获取”）；
this.curLocation=this.addressService.retrieveLocation（响应）；
const currentPosition=this.curLocation.address.ShortLabel；
this.details.get（'location'）.setValue（currentPosition）
});
}否则{
警报（“此设备不支持地理定位”）；
}
}
删除
[（值）]=“currentPosition”
并更改
当前位置：字符串
to
get currentPosition（）：字符串{返回this.details.get（'location'）.value}
@OwenKelvin我正在使用[（value）]=“currentPosition”来更改getLocation（）方法中输入字段的值。是否有更好的方法一起更新输入和表单组？