Render markers from GeoJson

Question

I'm a bit desperate with this problem. I want to show in my map markers from a GeoJSON (a valid GeoJson, it works in geojson.io). It seems easy, but I don't see where's my error. I'm using ngx-leaflet and my code is this:

map.component.html

<div leaflet
  [leafletOptions]="leafletOptions"
  [leafletBaseLayers]="baseLayers"
  [leafletLayersControlOptions]="layersControlOptions"
  (leafletMapReady)="onMapReady($event)">
</div>

map.component.ts

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

const layOsm: L.TileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: false,
  detectRetina: true
});

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

  leafletOptions: L.MapOptions = {
    zoom: 6,
    center: L.latLng(40.4166395, -3.7046087)
  };

  baseLayers: {[layerName: string]: L.Layer} = {
    'OSM': layOsm
  };

  layersControlOptions: L.ControlOptions = { position: 'topright' };

  constructor(private mapService: MapService) { }

  ngOnInit() { }

  onMapReady(map: L.Map) {
    // L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet/';
    setTimeout(() => {
      map.invalidateSize();
    }, 0);

    let alteraciones: any[];
      this.mapService.getListAlteraciones(11, 30).subscribe(
        result => {
          alteraciones = result;
        },
        err => console.log(err)
      );

    L.geoJSON(alteraciones, {pointToLayer: function (feature, latlng) {
        return L.marker([latlng]);
      }
    }).addTo(map);
  }

}

I don't get any errors in the compilation or in the console.log, but I don't know what I'm doing wrong. I try to replicate some examples that I found on the official repo, but I can't do it work. Any help would be appreciated. Thanks in advance!

EDIT This is a piece of the GeoJson from the server:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.40463,36.680111]},"properties":{"id_alteracion":"11_3210","tipo_alteracion":"11"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.374478,36.658933]},"properties":{"id_alteracion":"11_3127","tipo_alteracion":"14"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.359779,36.619801]},"properties":{"id_alteracion":"11_3172","tipo_alteracion":"11"}}...]}

Answer 1

Finally, I found the error. It turns out that the GeoJSON was loaded before the server response arrived, so it did not paint any points. Doing this finally works.

   this.mapService.getListAlteraciones(11, 30).subscribe(
      result => {
        this.alteraciones = result;
        console.log(result);
        L.geoJSON(this.alteraciones).addTo(map); // <====
      },
      err => console.log(err)
    );