agm标记未从ngfor呈现

Question

我对角度很陌生，我认为这是一个基本的问题。

我创建我的地图

<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循环之前呈现的，我不确定如何确保首先执行循环或如何在循环完成后才告诉映射(重新)呈现标记。

如前所述，这可能是相当基本的，但我现在很困惑，谢谢。

Answer 1

纬度/经度必须是类型数。如果它们是作为字符串从API或某种服务返回的，则需要对它们进行转换。根据我的经验，它似乎需要严格地作为一个数字输入。

Answer 2

当涉及到显示标记时，我需要解决与ngFor有关的问题。

我从API (纬度、经度)收集数据，无法进行绑定。

我怀疑这可能是因为它没有检测到“数字”的类型。

map.interface.ts：

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

地图定位：

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