Angular - this.function不是一个函数。

Question

我对此有些绝望。我有一个组件，它接受数据并使用此数据的信息呈现地图。到这里都很好。我在地图上放置了标记，并希望在标记上执行单击函数。该函数调用组件中定义的另一个函数，并将数据带给我以在模态框中显示。但是，当我点击标记时，我收到以下错误消息：

this.getInfoAlteracion不是一个函数

我不知道为什么。我尝试了很多方法，但我看不到错误。下面是我的代码：

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet.markercluster';
import { MapService } from './services';
import * as global from 'app/globals';
import { Alteracion } from './dto/alteracion';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  public alteraciones: Alteracion[] = [];
  public alteracion: Alteracion[] = [];

  constructor(private mapService: MapService) {}

  ngOnInit() {
    this.getAlteraciones();
  }


  getAlteraciones() {
    this.mapService.getListAlteraciones(11, 1).subscribe(
      result => {
        this.alteraciones = result;
        this.renderMap();
      },
      err => console.log(err)
    );
  }

  getInfoAlteracion(id_alteracion: string) {
    this.mapService.getInfoAlteracion(id_alteracion).subscribe(
      result => {
        this.alteracion = result;
        console.log(this.alteracion);
      },
      err => console.log(err)
    );
  }

  renderMap() {
    L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet/';
    let map: any;

      map = L.map('map', {
            zoomControl: false,
            format: 'image/jpeg',
            center: L.latLng(40.4166395, -3.7046087),
            zoom: 2,
            minZoom: 0,
            maxZoom: 19,
            layers: [this.mapService.baseMaps.Esri]});

      L.control.zoom({ position: 'topleft' }).addTo(map);
      L.control.layers(this.mapService.baseMaps).addTo(map);

    let cluster = L.markerClusterGroup();

    for (let al of this.alteraciones) {
      let marker = L.marker([al.coory, al.coorx]);

      marker.on('click', function(e) {
        alert('Id alteración: ' + al.id_alteracion); // THIS WORKS
        this.getInfoAlteracion(al.id_alteracion); // THIS DON'T WORK
        console.log(this.alteracion);
      });

      cluster.addLayer(marker);
    }
    map.addLayer(cluster);   

}

有什么想法吗？提前感谢！

- Aw3same

Answer 1

你需要为事件处理程序使用箭头函数。

  marker.on('click', (e) => {
    alert('Id alteración: ' + al.id_alteracion); // THIS WORKS
    this.getInfoAlteracion(al.id_alteracion); // THIS DON'T WORK
    console.log(this.alteracion);
  });

在Javascript和Typescript中，this是由调用者确定的function。箭头函数从声明位置捕获this。简单来说，this可能不是您预期的那样。

- Titian Cernicova-Dragomir

Answer 2

请尝试以下方法：

请按照以下方式尝试

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet.markercluster';
import { MapService } from './services';
import * as global from 'app/globals';
import { Alteracion } from './dto/alteracion';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  public alteraciones: Alteracion[] = [];
  public alteracion: Alteracion[] = [];

  constructor(private mapService: MapService) {}

  ngOnInit() {
    this.getAlteraciones();
  }


  getAlteraciones() {
    this.mapService.getListAlteraciones(11, 1).subscribe(
      result => {
        this.alteraciones = result;
        this.renderMap();
      },
      err => console.log(err)
    );
  }

  getInfoAlteracion(id_alteracion: string) {
    this.mapService.getInfoAlteracion(id_alteracion).subscribe(
      result => {
        this.alteracion = result;
        console.log(this.alteracion);
      },
      err => console.log(err)
    );
  }

  renderMap() {
      const reference=this; // code added
    L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet/';
    let map: any;

      map = L.map('map', {
            zoomControl: false,
            format: 'image/jpeg',
            center: L.latLng(40.4166395, -3.7046087),
            zoom: 2,
            minZoom: 0,
            maxZoom: 19,
            layers: [this.mapService.baseMaps.Esri]});

      L.control.zoom({ position: 'topleft' }).addTo(map);
      L.control.layers(this.mapService.baseMaps).addTo(map);

    let cluster = L.markerClusterGroup();

    for (let al of this.alteraciones) {
      let marker = L.marker([al.coory, al.coorx]);

      marker.on('click', function(e) {
        alert('Id alteración: ' + al.id_alteracion); 
        reference.getInfoAlteracion(al.id_alteracion); // code updated
        console.log(this.alteracion);
      });

      cluster.addLayer(marker);
    }
    map.addLayer(cluster);   

}

- Ajmal Sha

---

如果我们已经在使用Typescript，为什么不直接使用箭头函数呢？ - Titian Cernicova-Dragomir