ionic2/angular 2 - *ng 不处理地图标记内容

Question

我正在尝试在我的地图标记的信息窗口上打印数据。我设法在 console 中获取数据，但无法在信息窗口上打印。标记和信息窗口确实出现在地图上，只是无法检索数据。

该代码用于测试目的，所以我只从 JSON 对象数组中获取一个对象。

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

感谢任何帮助并提前致谢:)

用于获取存储在 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"}

信息窗口上的输出

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

Answer 1

试试这个。将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();

  });

Answer 2

我试过使用另一种方法，它有效。不确定为什么 *NgFor 不工作。

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>';  
}

ionic2/angular 2 - *ng 不处理地图标记内容

ionic2/angular 2 - *ngfor not working on map markers content

google-maps

ngfor

angular