перетаскивание маркера не обновляет адрес места

Question

Я использую Angular Maps с Angular 6.

Мне нужно иметь привязку между перетаскиваемым маркером и текстовым полем автозаполнения google place

Это почти работает, но у меня странное поведение, когда я геокодирую место из latlng, я могу разрешить место без проблем, но поле не будет обновлять новое значение, пока я не наведу курсор мыши на маркер.

Не знаю, что здесь происходит.

Вот мой код:

<form #form="ngForm" (ngSubmit)="onSubmit()">
    <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
      <agm-marker [latitude]="latitude" [longitude]="longitude"
                  (dragEnd)="markerDragEnd(latitude, longitude, $event)"
                  [markerDraggable]="true"></agm-marker>
    </agm-map>
    <input id="address" name="address" placeholder="search for location"
             type="text" class="form-control input-lg" #search [(ngModel)]="tournament.venue.address">
</form>

и компонент:

export class TournamentEditVenueComponent implements OnInit {
  @Input() tournament: Tournament;
  loading = false;
  submitted = false;
  error = '';
  countries = COUNTRIES;
  public latitude: number;
  public longitude: number;
  public zoom: number;

  @ViewChild('search')
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
  ) {
  }

  markerDragEnd(lat, lng, $event: MouseEvent) {
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
    const geocoder = new google.maps.Geocoder();
    const latlng = new google.maps.LatLng(this.latitude, this.longitude);
    const request = {
      latLng: latlng
    };

    geocoder.geocode(request, (results, status) => {
        this.tournament.venue.address = results[0].formatted_address;
        console.log('1:' + this.tournament.venue.address);
    });
  }

  ngOnInit() {
    // set google maps defaults
    this.zoom = 4;
    this.latitude = parseFloat(this.tournament.venue.latitude);
    this.longitude = parseFloat(this.tournament.venue.longitude);
    // create search FormControl
    // set current position
    this.setCurrentPosition();

  }

  private setCurrentPosition() {
    // If no registered location, set it to current browser position
    if ('geolocation' in navigator && this.latitude == null && this.longitude == null) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 12;
      });
    }
  }


}

Чего мне не хватает?

Answer 1

Обновите ваш адрес внутри NgZone, чтобы Angular обнаружил изменение:

geocoder.geocode(request, (results, status) => {
  this.ngZone.run(() => {
    this.tournament.venue.address = results[0].formatted_address;
  })
}); 

Вот демо