Question

我有一个简单的表单，其中包含2个文本输入和一个传单地图，一旦用户单击地图，我便会获得该位置的经度和纬度。

我正在ngOnInit()功能中设置地图，并且有一个全局变量，供用户单击后要设置的纬度。然后在表单提交中，当我尝试控制台记录this.latitude时，它总是显示undefined或0，以防我将其初始化为0。

这是我的组成部分：

import { Component, OnInit } from '@angular/core';
import { RestService } from '../providers/rest.service';
import { SnotifyService } from '../../../node_modules/ng-snotify';
import { NgForm } from '../../../node_modules/@angular/forms';
import { Bank } from '../models/bank';

declare let L;

@Component({
  selector: 'app-add-bank',
  templateUrl: './add-bank.component.html',
  styleUrls: ['./add-bank.component.css']
})
export class AddBankComponent implements OnInit {
  bank:Bank;
  map:any;
  latitude:Number;
  longitude:any;

  constructor(private restService :RestService,private snotifyService: SnotifyService) { 
    this.latitude = 0;
    if(! this.bank){  
      this.bank={

        name:"",
        adress:"",   
        location:{
          coordinates:[0,0]
        }

      };
    }
  }

  ngOnInit() {
    this.addMap();  
  }

  addMap(){
    const map = L.map('map').setView([36.798854, 10.152786], 8);

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

      let latlng = map.mouseEventToLatLng(e.originalEvent);

      console.log(latlng.lat + ', ' + latlng.lng);
        this.latitude = latlng.lat
        console.log("addmap",this.latitude)
      //remove previous markers
      if (Marker) {
        map.removeLayer(Marker);
      }
      // Add marker to map at click location; add popup window

      Marker = new L.marker(e.latlng, {
        draggable: true,
        icon: L.icon({
          iconSize: [ 25, 41 ],
          iconAnchor: [ 13, 41 ],
          iconUrl: 'assets/leaflet/images/marker-icon.png',
          shadowUrl: 'assets/leaflet/images/marker-shadow.png'
        }),
      }).addTo(map);
    });

  }

    testForm(form :NgForm){
        console.log('data : ', form.value )
        console.log("ngform",this.latitude)

    }
}

简短版本：如何在ngOnInit()中设置变量值，然后在同一组件的其他函数中检索该值？我想念什么？任何帮助，将不胜感激。谢谢

Answer 1

对我来说，您正面临“范围”问题。

map.on('click', function addMarker(e){

在此声明函数，在函数作用域中，“ this”关键字将是函数，而不是组件。您应将此代码替换为

map.on('click', addMarker(e) => {

使用箭头功能，您将不会遇到问题;）

无法更改ngOnInit（）中的变量值

1 个答案: