角度を使用した逆ジオコーディング

Question

角度アプリで逆ジオコーディングを使用しています。

必要なスクリプトはindex.htmlを

<script async defer src="https://maps.googleapis.com/maps/api/js"> 
</scrip> 

およびコンポーネントファイルに追加されますが、この

import { Component } from '@angular/core'; 
declare const google: any; 

export class MapComponent { 

    lat; 
    lng; 
    address; 

    constructor() { 
    this.locate(); 
    } 

    public locate() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(
     position => { 
      this.lat = position.coords.latitude; // Works fine 
      this.lng = position.coords.longitude; // Works fine 

      let geocoder = new google.maps.Geocoder(); 
      let latlng = new google.maps.LatLng(this.lat, this.lng); 
      let request = { 
      latLng: latlng 
      }; 

      geocoder.geocode(request, (results, status) => { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0] != null) { 
       this.address = results[0].formatted_address; //<<<=== DOES NOT WORK, when I output this {{ address }} in the html, it's empty 
       console.log(this.address); //<<<=== BUT here it Prints the correct value to the console !!! 
       } else { 
       alert("No address available"); 
       } 
      } 
      }); 
     }, 
     error => { 
      console.log("Error code: " + error.code + "<br /> Error message: " + error.message); 
     } 
    ); 
    } 
    } 
} 

とコンポーネントのhtmlファイルのように見えますが、これはアドレス

出力になっています

<div>{{ lat }}</div>  // Works fine 
<div>{{ lng }}</div>  // Works fine 
<div>{{ address }}</div> // Deosn't Work, EMPTY 

しかし、それは常に空です。 ただし、この行

console.log(this.address); 

正しい値が印刷されます。

Answer 1

ここには2つの可能性がありますが、再現せずに確認することはできないため、両方をリストします。

1）あなたが角度のゾーン

角度のゾーン内で実行されていない表示するための変数を変更するコードではありません。これは、ここでやっているようなサードパーティ製のライブラリからのコールバックを使用するときに発生する傾向があります。

修正するにはNgZoneを注入し、表示する変更をUIに反映させて、this.ngZone.runとしてください（次のスニペットのように）。どこかの道に沿って

constructor(private ngZone: NgZone) {} 

locate() { 
    /* ... */ 
     this.ngZone.run(() => { 
     this.location = results[0].formatted_address 
     }) 
    /* ... */ 
} 

2）間違ったthis

、あなたはクラスのインスタンスを指すthisを失ってしまった、とあなたは代わりに何か他のものに結果を書いています。 は、実際にプロパティが変更されていないため、thisも間違って記録され、角度は何も表示されないため、機能します。

Answer 2

this.locationを角度に設定してもコンポーネントが初期化されていないため、コンストラクタが呼び出されるときにが制御されません。

あなたのコンポーネントのプロパティをバインドされたデータを表示する準備ができていることを保証するngOnInitでlocate通話を試してみてください：

ngOnInit() { 
    this.locate(); 
}