无法在 Angular 6 中使用 ngFor 显示 agm 标记列表答案

【问题标题】：Can't display list of agm-markers using ngFor in Angular 6无法在 Angular 6 中使用 ngFor 显示 agm 标记列表
【发布时间】：2018-09-06 16:07:59
【问题描述】：

我正在使用 agm-marker 来显示标记列表。使用 ngFor 不会在地图上显示标记列表。我知道我应该使用 Number 类来表示纬度和经度，但我仍然看不到标记。

googlemaps.component.html

 <div class="row ">
    <div class="col-sm-6 ml-10 mr-10" >
    <agm-map [latitude]="lat" [longitude]="lng" style="height: 80vh"  *ngIf="mapReady">
        <agm-marker  *ngFor="let locationItem of allLocations" [latitude]="locationItem.latitude" [longitude]="locationItem.longitude">
        </agm-marker>
    </agm-map>
    </div>
    </div>

googlemaps.component.ts

export class GoogleMapsComponent implements OnInit {

  lat = 30.2672;
  lng = -97.7431;
  allLocations: LocationData[] = new Array();
  mapReady = false;

  constructor(private googleMapsService: GoogleMapsService) {
  }

  ngOnInit() {
    this.allLocations = this.googleMapsService.getAllLocations();
    this.mapReady = true;
    console.log(this.allLocations);
     }
}

googlemaps.service.ts

import {Injectable} from '@angular/core';
import {LocationData} from './location';

const allLocationsData = [{

  locationId: '1',
  locationTitle: 'IcenHaur',
  locationText: 'First Date.',
  hasImages: false,
  latitude: '30.259610',
  longitude: '-97.738238'
},
  {locationId: '2',
    locationTitle: 'DogWood',
    locationText: 'Second Date.',
    hasImages: false,
    longitude: ' 30.401192',
    latitude: '-97.722935'
  },
  {locationId: '3',
    locationTitle: 'KungFoo',
    locationText: '3rd Date.',
    hasImages: false,
    longitude: '30.259656',
    latitude: '-97.738217'
  },
  {locationId: '4',
    locationTitle: 'Shack512',
    locationText: 'Scenic Drive',
    hasImages: false,
    longitude: '30.462621',
    latitude: '-97.913168'
  }]

@Injectable({
  providedIn: 'root'
})

export class GoogleMapsService {

  getAllLocations(): LocationData[] {

    let allLocations = new Array();
    allLocationsData.forEach(location => {
        let locationObject = new LocationData();
      locationObject.hasImages = location.hasImages;
      locationObject.locationId = location.locationId;
      locationObject.locationTitle = location.locationTitle;
      locationObject.longitude =  Number(location.longitude);
      locationObject.latitude =  Number(location.latitude);
      locationObject.locationText = location.locationText;
      locationObject.hasImages = location.hasImages;
      allLocations.push(locationObject);
    });
    return allLocations;
  }
}

locations.ts

export class LocationData {
  public locationId: string;
  public locationTitle: string;
  public locationText: string;
  public hasImages: boolean;
  public latitude: Number;
  public longitude: Number;
}

【问题讨论】：

除了您的服务不是可观察的（在这种情况下不需要）之外，您的所有代码都是有效的......所以我会说尝试使用较小的数据集并拥有googleMaps.component.ts 中的硬编码值来尝试调试？如果这不起作用，请尝试更改您的 googleMaps.service.ts 以返回 Observable<any> 而不是 LocationData[] 并将 mapReady=true 放入订阅？您可以在重构代码之前通过 setTimeout(() => mapReady=true, 1000); 模拟这一点

标签： angular angular6 marker angular-google-maps

【解决方案1】：

我认为您需要使用 Number 构造函数将这些数字显式转换为 Number。 TypeScript 仅提供有关类型转换的帮助和提示，它不会显式地将其从字符串转换。

【讨论】：