Маркер карты Agm не отображает маркеры

Question

Я использую угловой 4 и маркер карты agm. У меня есть созданный маркер, но он не работает, я поставил код ниже, пожалуйста, сообщите любому, как это исправить.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
}</code>

map.components.html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!-- 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 --></code>

Answer 1

Я также столкнулся с той же проблемой, поэтому попробовал ответ, указанный выше @ 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 в приведенном выше угловом коде.

Answer 2

Переменная 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"