title: Angular - this.function is not a function
body: <p>I'm a bit desperate with this. I have a component that takes data and renders a map with the information of this data. All fine here. I put markers on this map and I want to do a click function in the marker. Those function call another function defined in the component and bring me data to show it in a modal. But, when I click the marker, I receive this error:</p>
  
  <blockquote>
    <p>this.getInfoAlteracion is not a function</p>
  </blockquote>
  
  <p>I don't know why. I prove a lot of things but I can't see the error. Here's my code:</p>
  
  <pre><code>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 =&gt; {
          this.alteraciones = result;
          this.renderMap();
        },
        err =&gt; console.log(err)
      );
    }
  
    getInfoAlteracion(id_alteracion: string) {
      this.mapService.getInfoAlteracion(id_alteracion).subscribe(
        result =&gt; {
          this.alteracion = result;
          console.log(this.alteracion);
        },
        err =&gt; 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);   
  
  }
  </code></pre>
  
  <p>Any ideas? Thanks in advance!</p>