ionic2 / angular 2 - * ng不用于地图标记内容

Question

我正在尝试在地图标记的infowindow上打印数据。我管理得到console中的数据，但无法在infowindow上打印。标记和infowindow确实出现在地图上，但无法检索数据。

代码用于测试目的，因此我只从JSON Object数组中获取一个对象。

我对*ngfor let listing of maps.data数据确实出现了maps.html进行了测试。

提前感谢任何帮助和感谢:)

用于获取存储在googlemaps提供商中的位置和显示标记的功能

initMap(): Promise<any> {

this.mapInitialised = true;

return new Promise((resolve) => {

  this.geolocation.getCurrentPosition().then((position) => {

    // fixed position
    let latLng = new google.maps.LatLng(1.352100, 103.819800);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement, mapOptions);

      let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.BOUNCE,
      position: this.map.getCenter(),
      disableDefaultUI: true,
    });

     let mapListings = this.load();
     let data = this.mapListings;
     console.log(this.data[0]);


     let content = '<ion-item *ngFor="let listing of this.data[0]">' + 
     '<h2 class="payment_color">{{ listing.ListingTitle }}</h2>' + 
     '<p>{{ listing.ListingDatePosted }}</p>' +
     '<p>{{ listing.ListingDescription }}</p>' +
     '</ion-item>';          

     this.addInfoWindow(marker, content);

    resolve(true);


  });

});

}

console.log（mapListings）输出

t {__zone_symbol__state: true, __zone_symbol__value: Array(4)}
__zone_symbol__state: true
__zone_symbol__value: Array(4)
__proto__: Object

console.log（this.data [0]）输出

Object {ListingTitle: "This is the Title", 
ListingDatePosted: "20-July-2017", 
ListingDescription: "Hello World"}

Infowindow上的输出

{{ listing.ListingTitle }}
{{ listing.ListingDatePosted }}
{{ listing.ListingDescription }}

Answer 1

我尝试使用其他方法，但它确实有效。不知道为什么* Ng不能正常工作。

for ( let listing of this.data){
 let content = '<ion-item>' + 
     '<h2 style="color:red;">' + listing.ListingTitle +'</h2>' + 
     '<p>' + listing.ListingDatePosted + '</p>' +
     '<p>' + listing.ListingSalary + '</p>' +
     '</ion-item>';  
}

Answer 2

试试这个。用以下代码替换let内容

let content = `<ion-item *ngFor="let listing of this.data[0]">
     <h2 class="payment_color">{{ listing.ListingTitle }}</h2>
     <p>{{ listing.ListingDatePosted }}</p>
     <p>{{ listing.ListingDescription }}</p>
     </ion-item>`;       

保留上面的代码，然后在你的提供者或你调用initMap（）的任何地方，试试这个。

import { NgZone  } from '@angular/core';

    constructor(public zone: NgZone) {
    }

     this.zone.run(() => {
     initMap();

  });