Angular 角度Agm/岩芯图不与observable一起使用异步显示地图并动态添加标记

我调用一个API来返回一个带有地图标记列表的可观察对象。我试图在地图上使用标准的

ngIf async

逻辑，在可观察对象接收数据时显示地图。当它返回地图标记数据列表时，我尝试迭代

agm marker

，在地图上动态生成标记，如下所示：

<agm-map *ngIf='ObservableListItems | async as listItems'
  [latitude]="lat" 
  [longitude]="lng">

  <agm-marker *ngFor='let items of listItems'
    [latitude]="items .latitude" 
    [longitude]="items .longitude"
    [iconUrl]="image'
    [title]="items.title"
    [label]="items.label"
    class="agm-marker">
  </agm-marker>
</agm-map>

<div *ngIf='ObservableListItems| async as listItems'>
  <div *ngFor='let items of listItems'>
    <h1>{{items.latitude}}</h1>
    <h1>{{items.longitude}}</h1>
    <h1>{{items.title}}</h1>
    <h1>{{items.label}}</h1>
  </div>
</div>

---

我遇到了同样的问题。似乎唯一的解决办法是手动打开typescript中的可观察对象。

export class MapComponent {

  lat: number = 51.678418;
  lng: number = 7.809007;

  /* 
     These were used in the map but I removed as I do 
     not have anything to open yet. Hopefully not required
  */
  // markerClickable: boolean = true;
  // openInfoWindow: boolean = true;

  /* Custom marker icon for the map */
  image = {
    url: './assets/marker.png',
    scaledSize: {
      width: 60,
      height: 60
    }
  }

  constructor(private _MapService: MapService) { 

  }

  public get ObservableListMap(): Observable<Array<ListItemMap>> {
    return this._MapService.ObservableListMap;
  }
}