如何与 Angular Google Maps 的 *ngFor <agm-marker> 绑定

Question

在显示标记时，我需要解决 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

Answer 1

试试这个：

change [latitude]="marker.lat[i]" [longitude]="marker.lng[i]"
in
[latitude]="+marker.lat[i]" [longitude]="+marker.lng[i]"

（需要转换为数字），我就是这样解决的