EventEmitter未更新[（ngModel）]绑定属性

我正在使用表单模块和Google地图，并根据地图上提供的搜索框更新地理编码。 Map是一个不同的组件，它使用函数geoCodeChange（）发出Geocode。 Theis事件由具有表单的父组件中的另一个函数处理。EventEmitter未更新[（ngModel）]绑定属性

地图组件：

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中的字段。

我在做什么错了？

在此先感谢

来源

2017-02-21 CruelEngine

你有一堆代码在那里。请隔离问题并显示重现此问题的最低代码:) – Alex

谢谢您的回复。我编辑了我的帖子，删除了不需要的代码。 – CruelEngine

我们需要从“地图组件”中看到更多的代码。组件上面的代码在哪里，它从哪里被调用。 –

如果使用箭头功能

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

这可能不是你的问题的解决方案不需要self。

来源

2017-02-22 06:47:05

谢谢你的回复。将这样做:) – CruelEngine

EventEmitter未更新[（ngModel）]绑定属性

回答

相关问题