it-swarm.com.ru

маркеры agm не рендерится от ngfor

Я довольно новичок в angular и ​​имею то, что считаю основной проблемой.

Я создаю свою карту как

<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>

когда я устанавливаю маркеры вручную, все работает, но когда я использую *ngFor для циклического перемещения по списку, создается HTML-код для маркеров, но, очевидно, после того, как скрипт для карты искал маркеры, поэтому маркеры не отображаются (сама карта ).

С моего контроллера:

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();
}

}

местоположения загружаются из службы, которая извлекает их из удаленной базы данных. Я действительно считаю, что проблема в том, что карта отображается перед выполнением цикла ngFor, я не уверен, как я могу убедиться, что цикл выполняется первым OR как указать (повторно) выполнить рендеринг карты маркер только после завершения цикла.

Как уже говорилось, это, вероятно, довольно просто, но сейчас я в растерянности, спасибо.

6
user3154108

Широта/Долгота должны быть типа Номер. Если они возвращаются из API или какого-либо сервиса в виде строки, их необходимо преобразовать. По моему опыту, кажется, что он должен быть строго напечатан как число.

8
Dale

Мне нужно решить проблему, которая у меня есть с ngFor, когда дело доходит до отображения маркеров.

Я собираю данные из API (широта, долгота) и не могу сделать привязку.

Я подозреваю, что это может быть потому, что он не определяет тип как «число».

map.interface.ts:

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

карта-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);

    });
  }

}

А это 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>

Это console.log массива

0
Ruben GH