Agm 地图标记不显示标记答案

【问题标题】：Agm map marker not display markersAgm 地图标记不显示标记
【发布时间】：2018-11-04 12:50:49
【问题描述】：

我正在使用 angular 4 和 agm 地图标记，我创建了标记，但它不起作用，我已将代码放在下面，请告诉任何人如何修复它。

import { Component, OnInit } from '@angular/core';
import { IDashItem } from '../../../Interface/dashitem';
import { DashService } from '../../../services/dash.service'

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
//export class SliderComponent implements OnInit {
  lat: number = -43.9509;
  lng: number = -34.4618;
  zoom: number = 4;
  //httpdata: any;  
  constructor(private dashservice: DashService) { }


  ngOnInit() {
    return this.dashservice.getdashitem().subscribe(Response => {
      this.httpdata = Response;
      console.log(this.httpdata)
    })
  }

}
interface marker{
  name?: string;
  lat?: number;
  lng?: number;
  draggable?: boolean;
}

map.components.html

<!-- Heading Row -->
      <div class="row my-4">
        <div class="col-lg-8">
          <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [zoomControl]="false" (mapClick)="mapClicked($event)">
            <agm-marker 
              *ngFor ="let map of httpdata; let i = index"
              (markerClick)="clickedMarker(map, i)"
              [latitude]="map.address.geo.lat" 
              [longitude]="map.address.geo.lng">
            </agm-marker>
          </agm-map>
        </div>
        <!-- /.col-lg-8 -->
        <div class="col-lg-4">
          <app-bn-tagline></app-bn-tagline>
        <div *ngFor ="let map of httpdata; let i = index">
            <label>{{map.address.geo.lat}}</label>
            <label>{{map.address.geo.lng}}</label>
        </div>
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

【问题讨论】：

标签： angular google-maps

【解决方案1】：

httpdata 变量正在异步解析。您是否尝试更改 map.components.html 中的这一行：

<agm-marker *ngFor ="let map of httpdata; let i = index"

与：

<agm-marker *ngFor="let map of (httpdata | async); let i = index"

【讨论】：

【解决方案2】：

我也遇到了同样的问题，所以尝试了@user1183098 给出的上述答案，但它对我不起作用。所以我使用以下概念解决了这个问题： - Here the problem is due to async data coming from services.So you can do something like store the data coming from services first in some variable (let say httpData) then after the completion of that method, trigger a function which will return the data saved in the variable httpData. 现在将上面给定的角度代码中的httpdata 替换为httpData。

【讨论】：