Почему координаты не установлены в объекте?

Question

У меня есть угловое приложение, использующее библиотеку листовок, в которой я хочу щелкнуть карту и сохранить координаты в BD.

Для этого у меня есть map.component.ts, где координатывзят и передан в service.ts, но в service.ts я получаю пустой объект.

import { Component, OnInit } from '@angular/core';
import { FeaturesService } from '../../services/feature.service'
import { Vertex } from '../../models/vertex'

declare let L;

var lat;
var lng;
var coordinatesObj: Vertex;
var map;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  constructor(private _vertexService: FeaturesService) {}

  ngOnInit() {

    map = L.map('map').setView([40.4893538, -3.6827461], 13);


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

  }


  getCoordinates() {
    map.addEventListener('click', function(ev) {
      lat = ev.latlng.lat;
      lng = ev.latlng.lng;

      coordinatesObj = {
        "lat": lat,
        "lng": lng
      };


    })
    this.sendCoords(coordinatesObj);
  }

  sendCoords(coordinatesObj) {

    this._vertexService.registerVertex(coordinatesObj).subscribe(

      response => {
        if (!response) {
          console.log('there is no response')
        } else {

          console.log(response)
        }
      },
      error => {
        let errorMessage = < any > error;
        if (errorMessage !== null) {
          let body = JSON.parse(error._body);
          console.log('error:' + body);
        }
      }
    );
  }
}

Что я делаю не так?Переменные lat и long объявляются вне map.addEventListenerEvent, поэтому они могут быть доступны любым методом.

Answer 1

Ваша проблема заключается в попытке вызвать метод getCoordinates, который регистрирует только прослушиватель щелчков, а затем отправляет пустой объект в метод sendCoords.В зависимости от варианта использования, я бы лучше сдвинул линию this.sendCoords(coordinatesObj) в addEventListern и всегда выполнял ее после нажатия.

Sidenote: Имхо, было бы лучше использовать угловые узоры и создаватьотдельный сервис для передачи координатObj вместо объявления переменной вне компонента.

Answer 2

Ваша getCoordinates функция неверна.Вы не дожидаетесь фактического события щелчка, которое будет инициировано, и вместо этого отправляете пустую coordinatesObj в функцию sendCoords.

Вместо этого вам следует зарегистрироваться в обработчике щелчка и отправлять координаты только после обработчика событиябыл вызван.

map.addEventListener('click', function(ev) {
  lat = ev.latlng.lat;
  lng = ev.latlng.lng;

  coordinatesObj = {
    "lat": lat,
    "lng": lng
  };

  // This part is important! Now the sendCoords will only be called after the use clicked on the map.
  this.sendCoords(coordinatesObj);
});

Я бы предложил зарегистрировать обработчик щелчков в вашей функции ngOnInit.Функция getCoordinates может стать устаревшей, но не видя ваш HTML, я не могу сказать наверняка.