프런트 엔드에서 각도 2의 구성 요소 변수 값을 가져올 수 없습니다.

Question

프런트 엔드에서 mapLoc 값을 표시 할 수 없습니다 ... 어떤 도움이 필요합니까? 여기

내 component.ts이이 mycomponent.html 파일

<ngui-map zoom="{{zoom}}" center="{{lat}}, {{lng}}" (mapReady$)="onMapReady($event,lat,lng)" (mapClick)="onMapClick($event)" (idle)="onIdle($event)"> 
       <marker *ngFor="let pos of position" [position]="[pos.lat, pos.lng]" draggable="true" (initialized$)="onMarkerInit($event)"></marker> 
        <info-window id="iw"> 
         <div *ngIf="marker.display"> 
         {{mapLoc}} 
         </div> 
        </info-window> 
      </ngui-map> 

Answer 1

this의 값은 콜백 내부 다를 수 있습니다

export class mycomponent{ 

mapLoc:any; 

constructor(){...} 

openImageModal(lat,lng){ 
this.mapLoc = ''; 
var latlng = new google.maps.LatLng(lat, lng); 
     var geocoder = geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 'latLng': latlng }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        if (results[1]) { 
         console.log(results[1].formatted_address); //able to console 
         this.mapLoc = results[1].formatted_address; 
        } 
       } 
      }); 
} 

파일 (이를 확인하려면 내부 console.log("this", this) 시도 콜백.). 대신 구성 요소에 대한 참조를 유지하려면 big arrow function을 사용해보십시오.

geocoder.geocode({ 'latLng': latlng }, (results, status) => { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[1]) { 
        this.mapLoc = results[1].formatted_address; 
       } 
      } 
     }); 

또는 참조를 캐시하고 오래된 방법으로 그것을 사용

let component = this; 
    geocoder.geocode({ 'latLng': latlng }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[1]) { 
        console.log(results[1].formatted_address); //able to console 
        component.mapLoc = results[1].formatted_address; 
       } 
      } 
     }); 

Answer 2

범위 지정의 매우 일반적인 문제입니다 :

그냥 변경 :

geocoder.geocode({ 'latLng': latlng }, function (results, status) { 

을에

이상의 세부 사항이 타이밍

geocoder.geocode({ 'latLng': latlng }, function (results, status) { ... }).bind(this) 

: https://stackoverflow.com/a/47278161/2349407