Javascript 角度等待服务响应

我正在开发一个调用谷歌地理编码API的服务。但是，我必须单击两次按钮才能显示输入。是否有办法等待输入字段只有在收到响应后才更新

HTML

服务

  locResponse: any;
  curLocation: string;
  reverseGeo: string = "https://maps.googleapis.com/maps/api/geocode/json?";

  // Retrieves location based on coordinates
  retrieveLocation(position:any){
    // If else statement prevents user from spamming the API
    if(this.curLocation != undefined){
      return this.curLocation
    } else{
      // Calls the API if location is empty
      this.http.get(this.reverseGeo + "latlng=" + position.coords.latitude + "," + position.coords.longitude + "&key=" + this.key).subscribe(response =>{
        // Converts response into type <any> to prevent error message
        this.locResponse = response;
        this.curLocation = this.locResponse.results[0].formatted_address;
        console.warn(this.curLocation)
        return this.curLocation;
    })
  }

locResponse:any；
卷曲位置：弦；
reverseGeo:字符串=”https://maps.googleapis.com/maps/api/geocode/json?";
//根据坐标检索位置
检索位置（位置：任意）{
//If-else语句防止用户滥发API
if（this.curLocation！=未定义）{
把这个还给我
}否则{
//如果位置为空，则调用API
this.http.get（this.reverseGeo+“latlng=“+position.coords.latitude+”，“+position.coords.longitude+”&key=“+this.key”）。订阅（响应=>{
//将响应转换为类型以防止出现错误消息
this.locResponse=响应；
this.curLocation=this.locResponse.results[0]。格式化的\u地址；
console.warn（此.curLocation）
把这个还给我；
})
}

使用以下修改后的服务，该服务返回您在两种情况下均可观察到的结果。导入

的
、
地图
和
点击rxjs的操作员：

retrieveLocation(position: any){
  // If else statement prevents user from spamming the API
  if (this.curLocation != undefined) {
    return of(this.curLocation)
  } else {
    // Calls the API if location is empty
    return this.http.get(this.reverseGeo + "latlng=" + position.coords.latitude + "," + position.coords.longitude + "&key=" + this.key).pipe(
      tap(response => {
        // Converts response into type <any> to prevent error message
        this.locResponse = response;
        this.curLocation = this.locResponse.results[0].formatted_address;
        console.warn(this.curLocation)
        // return this.curLocation;
      }),
      map(res =>{
        return res.results[0].formatted_address // here return ur formatter address
      })
    )
  }
}

  locResponse: any;
  curLocation: string;
  reverseGeo: string = "https://maps.googleapis.com/maps/api/geocode/json?";

  // Retrieves location based on coordinates
  retrieveLocation(position:any){
    // If else statement prevents user from spamming the API
    if(this.curLocation != undefined){
      return this.curLocation
    } else{
      // Calls the API if location is empty
      this.http.get(this.reverseGeo + "latlng=" + position.coords.latitude + "," + position.coords.longitude + "&key=" + this.key).subscribe(response =>{
        // Converts response into type <any> to prevent error message
        this.locResponse = response;
        this.curLocation = this.locResponse.results[0].formatted_address;
        console.warn(this.curLocation)
        return this.curLocation;
    })
  }

retrieveLocation(position: any){
  // If else statement prevents user from spamming the API
  if (this.curLocation != undefined) {
    return of(this.curLocation)
  } else {
    // Calls the API if location is empty
    return this.http.get(this.reverseGeo + "latlng=" + position.coords.latitude + "," + position.coords.longitude + "&key=" + this.key).pipe(
      tap(response => {
        // Converts response into type <any> to prevent error message
        this.locResponse = response;
        this.curLocation = this.locResponse.results[0].formatted_address;
        console.warn(this.curLocation)
        // return this.curLocation;
      }),
      map(res =>{
        return res.results[0].formatted_address // here return ur formatter address
      })
    )
  }
}

    getLocation() {
    // Checks if GPS is supported
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(response => {
        
          this.addressService.retrieveLocation(response).subscribe(res = {
            this.curPosition = res;
            this.details.get('location').setValue(this.curPosition);
          });
      });
    } else {
      alert("Geolocation is not supported by this device")
    }
  }