web-dev-qa-db-fra.com

marqueurs agm ne rendant pas de ngfor

Je suis assez nouveau pour angular et ai ce que je pense est un problème fondamental.

Je crée ma carte comme 

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="location.lat" [longitude]="location.lng" *ngFor="let location of locations; let i=index">
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
            <ng-template>
                <strong>{{location.title}}</strong>
                <p>adresse</p>
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>

lorsque je mets les marqueurs manuellement, tout fonctionne, mais lorsque j'utilise *ngFor pour parcourir ma liste, le code HTML des marqueurs est créé, mais apparemment après que le script de la carte a recherché des marqueurs, aucun marqueur n'est restitué (la carte elle-même est affichée). ).

De mon contrôleur: 

export class LocationMapComponent implements OnInit {

 lat: number = 51.678418;
 lng: number = 7.809007;
 locations: Location[];

 async ngOnInit() {

}

public async getLocations()  {
    this.locations = await this._locationService.getLocations();

}

constructor(private _locationService:LocationService, private _coreCOMService: CoreCOMService, private _coreLanguageService: CoreLanguageService, private _coreLogService: CoreLogService, private _componentFactoryResolver: ComponentFactoryResolver, private _coreSystemService: CoreSystemService) {

    this.getLocations();
}

}

les emplacements sont chargés depuis un service qui les récupère depuis une base de données distante. Je crois que le problème est que la carte est rendue avant que la boucle ngFor ne soit exécutée, je ne sais pas comment je peux m'assurer que la boucle est exécutée en premier OR comment indiquer à la carte de (re-) restituer le marqueur seulement après que la boucle est terminée.

Comme je l'ai dit, c'est probablement assez fondamental, mais je suis désemparé, merci.

angularngforangular-google-maps
6
user3154108

Les Latitude/Longitudes doivent être de type Number. S'ils sont renvoyés à partir d'une API ou d'un type de service sous forme de chaîne, ils doivent être convertis. De par mon expérience, il semble exiger qu’il soit strictement saisi sous la forme d’un nombre.

8
Dale

J'ai besoin de résoudre le problème que j'ai avec ngFor lorsqu'il s'agit d'afficher les marqueurs.

Je collecte les données à partir d'une API (latitude, longitude) et je ne peux pas faire de liaison.

Je soupçonne que c'est peut-être parce qu'il ne détecte pas le type comme "numéro".

map.interface.ts:

export interface Marker {
    lat: number[];
    lng: number[];
 }

map-location.ts:

import { CapacitorBanksService } from '../../services/capacitorBanks.service';
import { Component, OnInit} from '@angular/core';
import { AuthService } from '../../services/auth/auth.service';
import { Marker } from './map.interface';

@Component({
  selector: 'mdb-map-location',
  templateUrl: './map-location.component.html',
  styleUrls: ['./map-location.component.scss'],
  providers: [AuthService, CapacitorBanksService]
})

export class MapLocationComponent implements OnInit {

  localCustomer = localStorage.getItem('customer_id');
  subscriptions: any;

  latitude: number = 40;
  longitude: number = 0;

  lat: number[] = [];
  lng: number[] = [];

  markers: Marker[] = [{
    lat: this.lat,
    lng: this.lng,
}];

  constructor(public authService: AuthService, public cbank: CapacitorBanksService) { }

  ngOnInit(): void {

    this.cbank.getCapacitorBanks(this.localCustomer).subscribe(ires => {
      let data: any;
      data = ires.data;

      data = data.map(index => {
        return index.id.id;
      });

      let indexx = 0;
      const interval = setInterval(() => {
        if ( data[indexx] ) {
          this.subscriptions = this.cbank.getAssetAttributesServer(this.localCustomer, data[indexx]).subscribe(vres => {

            const myObj = vres;

            Object.keys(myObj).forEach(key => {
              if (myObj[key].key === 'latitude') {
                  this.lat.Push(myObj[key].value);
              }
            });

            Object.keys(myObj).forEach(key => {
              if (myObj[key].key === 'longitude') {
                  this.lng.Push(myObj[key].value);
              }
            });
            indexx ++;
          });
        } else {
          this.subscriptions.unsubscribe();
        }

        if ( indexx >= data.length - 1 ) {
          clearInterval(interval);
        }
      }, 400);
      console.log('COORD: ', this.markers);

    });
  }

}

Et c'est map-location.component.html:

<div id="content">
    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="6">
        <agm-marker-cluster>
            <!-- <agm-marker *ngFor="let marker of markers; let i=index" 
            <agm-marker *ngFor="let marker of markers; let i=index" [latitude]="marker.lat[i]" [longitude]="marker.lng[i]"></agm-marker>
        </agm-marker-cluster>
    </agm-map>
</div>

Ceci est un fichier console.log du tableau

0
Ruben GH