未从 ngfor 渲染的 agm 标记

Question

我对 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 循环之前渲染的，我不确定如何确保首先执行循环或如何告诉地图仅在循环之后（重新）渲染标记完成了。

如前所述，这可能是非常基本的，但我现在不知所措，谢谢。

Answer 1

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

Answer 2

在显示标记时，我需要解决 ngFor 的问题。

我从 API（纬度、经度）收集数据，但无法进行绑定。

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

map.interface.ts：

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

地图位置.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>

This is a console.log of the array