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 *ngIf
porque 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;
});
}
}