1

Soy nuevo en angular y para practicar estoy situando markers leidos de un json sobre un mapa. Estoy situandolos así, en el .html:

<agm-marker *ngFor="let punto of farmacias.features, let i=index" (markerClick)="clickedMarker(i)" [latitude]="punto.geometry.coordinates[1] " [longitude]="punto.geometry.coordinates[0]" [iconUrl]=" icon"></agm-marker>

Y leyendo el json con this.http.get(. El problema es que <agm-marker>se ejecuta antes de que se haya leido el json y provoca errores en la consola. Y no puedo poner un *ngIfporque solo admite un ng por etiqueta. Compila y funciona bien, pero con esos avisos en la consola. ¿como lo hariais vosotros? Supongo que podria ocultar todo el mapa con un loading hasta ese momento, pero no se si hay una forma mejor de hacerlo.

Pongo la parte relevante del código:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var require: any;

@Component({
    selector: 'mapa',
    templateUrl: './mapa.component.html',
    styles: ['agm-map { height: 300px;}']
})

export class mapaComponent implements OnInit {
    mostrar: boolean;
    nombre = "";
    telefono = "";
    barrio = "";
    values = [
        { id: 1, name: "Barrio: Todos", value: "Todos" },
        { id: 2, name: "Barrio: Oeste", value: "Oeste" },
        { id: 3, name: "Barrio: Centro", value: "Centro" },
        { id: 4, name: "Barrio: Este", value: "Este" }
    ];
    lat = 40.353861306107959;
    lon = -3.534167475411653;
    zoom = 12;
    puntos: any;
    farmacias: any;

    filtro = "todos";
    public onChange(event): void { // event will give you full breif of action
        var newVal = event.target.value;
        this.filtro = newVal;
        if (newVal != "Todos") {
            this.puntos = this.farmacias.features.filter(item => item.properties.BARRIO == newVal);
        }
    }
};

constructor(private http: HttpClient) {}

ngOnInit(): void {
    this.http.get('./assets/farmacias.json').subscribe(data => {
        this.farmacias = data;
    });
}
}

0

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.