EventEmitterが[（ngModel）]バウンドプロパティを更新していません

Question

私はフォームモジュールとGoogleマップを使用してマップ上の検索ボックスに基づいてジオコードを更新しています。 マップは別のコンポーネントであり、geoCodeChange（）関数を使用してジオコードを発行します。Theisイベントは、フォームを持つ親コンポーネント内の別の関数によって引き渡されます。

マップコンポーネント：

export class mapComponent implements OnInit,OnChanges{ 
    @Output() emitGeoCode : EventEmitter<any> = new EventEmitter(); 
    @Output() emitMapObject : EventEmitter<any> = new EventEmitter(); 
    @Output() emitSearchBox : EventEmitter<any> = new EventEmitter(); 
    searchBox:any; 
    input:any; 
    place:any; 
    searchedGeocode:any; 
    addressMarker:any; 
    currentLocationMarker:any; 
    map:any; 
    mapOptions:any; 
    currentLocation:any; 
    changedGeocode:any; 
    ngOnChanges(){ 
     this.emitGeoCode.emit(this.searchedGeocode); 
    } 
    ngOnInit(){ 
     this.fetchCurrentLocation(); 
     this.mapOptions = { 
      center : new google.maps.LatLng(17.25,78.5), 
      zoom : 8, 
      zoomControls : true, 
      zoomControlOptions : { 
      position: google.maps.ControlPosition.LEFT, 
     }, 
     mapTypeControl : false, 
     streetViewControl : false, 
     } 
     this.map = new google.maps.Map(document.getElementById('map'),this.mapOptions); 
     this.input = document.getElementById("pac-input"); 
     this.searchBox = new google.maps.places.SearchBox(this.input); 
     this.searchBox.addListener('places_changed',() => { 
     this.onSearchResultSelect(); 
     }); 
     this.map.addListener('bounds_changed',() => { 
      this.searchBox.setBounds(this.map.getBounds()); 
     }); 
     let icon = { 
      url: "images/currentLocation.png", 
      scaledSize: new google.maps.Size(15, 15), // scaled size 
      origin: new google.maps.Point(0,0), // origin 
      anchor: new google.maps.Point(0, 0) 
     }; 
     this.emitGeoCode.emit('17.25,78.5'); 
     this.emitMapObject.emit(this.map); 
     this.emitSearchBox.emit(this.input); 
    } 


    fetchCurrentLocation(){ 
     if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition((response) => { 
       this.showCurrentLocation(response); 
      }, function() { 
       alert("Unable to get GPS Location"); 
      }, { 
       enableHighAccuracy : true 
      }); 
     } 
     else { 
      alert("Geolocation is not supported by this browser."); 
      } 
    } 
    showCurrentLocation(position:any) { 
     let icon = { 
      url: "images/currentLocation.png", 
      scaledSize: new google.maps.Size(15, 15), // scaled size 
     }; 
     this.currentLocation = new google.maps.LatLng(17.25,78.5); 
     this.currentLocationMarker = new google.maps.Marker({ 
      position : this.currentLocation, 
      map:this.map, 
      icon:icon, 
      title : 'Current Location' 
     }); 

     this.map.panTo(this.currentLocation); 
    } 

    onSearchResultSelect() { 
     if(this.addressMarker != undefined){ 
      this.addressMarker.setMap(null); 
      this.addressMarker.setMap(null); 
     } 
     let results:any; 
     let places = this.searchBox.getPlaces(); 
     if (places == undefined || places[0] == "" || places[0] == undefined || places[0].geometry == undefined) { 
      return; 
     } 
     this.place = places[0]; 
     this.map.setCenter(this.place.geometry.location); 
     this.searchedGeocode=this.map.getCenter().lat() + "," + this.map.getCenter().lng(); 
     let latLng = this.place.geometry.location.lat() + ',' + this.place.geometry.location.lng(); 
     this.emitGeoCode.emit(this.searchedGeocode); 
     let icon = { 
      url: "./images/location.png", 
      scaledSize: new google.maps.Size(30,30), 
     }; 
     this.addressMarker=new google.maps.Marker({ 
      position: this.place.geometry.location, 
      map: this.map, 
      icon: icon, 
      title: this.place.formatted_address, 
      draggable:true, 
     });   
     google.maps.event.addListener(this.map, 'dragstart', function() { 

     }); 
     google.maps.event.addListener(this.map, 'dragend', function() { 

     }); 
     this.addressMarker.addListener('dragstart',() => { 
      this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng(); 
     }); 
     this.addressMarker.addListener('dragend',() => { 
      this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng(); 
      this.emitGeoCode.emit(this.changedGeocode); 
     }); 

    } 

    OnClick() { 
     this.input.value=''; 
     this.input.focus(); 
     if(this.addressMarker != undefined){ 
      this.addressMarker.setMap(null); 
      this.addressMarker.setMap(null); 
     } 
    } 
} 

私のフォームコンポーネントは次のとおりです。

geoCodeChanged(event){ 
     this.geoCodes = event; 
     this.geoCode = this.geoCodes; 
     console.log(this.geoCode); 
    } 

form.component.html：

<map style="width:70%;left:30%;" (emitGeoCode)="geoCodeChanged($event)" (emitMapObject)="getMapObject($event)"></map> 
<div id="dataform" class="container"> 
    <form style="position: relative;width: 100%;" #dataForm="ngForm"> 
     <div class="form-group" style="margin-bottom: 40px;"> 
      <label for="geoCode">GeoCode:</label> 
      <input id="geoCode" type="text" class="form-control" style="width:60%;" [(ngModel)]="geoCode" name="geoCode"> 
      <span style="color:limegreen">(Search using Map)</span> 
     </div> 
    </form> 
</div> 

マーカーがある場所から別の場所に変更されるたびに、新しいジオコードを発行します。発行されたジオコードは、form.component.htmlのフィールドを変更していません。

私は間違っていますか？あなたはおそらくあなたの問題への解決策ではありません矢印機能

this.addressMarker.addListener('dragend',() => { 
     this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng(); 
     this.emitGeoCode.emit(this.changedGeocode); 
    }); 

を使用する場合は、事前

Answer 1

で

ありがとうございますselfは必要ありません。