Angular EventEmitter未更新[(ngModel)]绑定属性

Angular EventEmitter未更新[(ngModel)]绑定属性,angular,angular2-forms,Angular,Angular2 Forms,我正在使用表单模块和谷歌地图,并根据地图上提供的搜索框更新地理代码。 Map是另一个组件,它使用函数geoCodeChange()发出地理代码。 该事件由父组件中具有表单的另一个函数处理 地图组件: export class mapComponent implements OnInit,OnChanges{ @Output() emitGeoCode : EventEmitter<any> = new EventEmitter(); @Output() emitMap

我正在使用表单模块和谷歌地图,并根据地图上提供的搜索框更新地理代码。 Map是另一个组件,它使用函数geoCodeChange()发出地理代码。 该事件由父组件中具有表单的另一个函数处理

地图组件:

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);
        }
    }
}
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中的字段

我做错了什么


提前感谢

如果使用箭头功能,您不需要
self

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

这可能不是您问题的解决方案。

您有一大堆代码。请隔离问题并显示重现问题的最小代码:)谢谢您的回复。我已经编辑了我的帖子,删除了不需要的代码。我们需要从“地图组件”中查看更多代码。上面的代码在组件内部的何处,从何处调用。谢谢!我解决了注入
ChangeDetectionRef
并调用
这个问题;这是._changeDetector.markForCheck()在回调方法中。另外:根据最佳实践,我使用的是
主题
而不是
事件发射器
,但这不会改变任何事情,请您回复。我会这样做:)
   this.addressMarker.addListener('dragend', () => {
        this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng();
        this.emitGeoCode.emit(this.changedGeocode);
    });