离子2-实时数据绑定

Question

我正在尝试从Google Maps标记中执行自己的信息窗口。当我单击标记时，我有一个显示的DIV，但是DIV内部的Infos未更新。event.title仍然是旧值。我必须单击我想要的任何地方，然后显示DIV。如何无需单击即可更新视图/数据？谢谢

<div [style.display]="choice == 'maps' ? 'block' : 'none'" style="height: 100%; position: relative;">
  <div #map id="map" style="width: 100%; height: 100%;">
  </div>
  <div id="over_map" class="infos" padding>
    <h4 style="color: white;">{{ event.title }}</h4>
  </div>
</div>

每次我要在地图上显示一个新标记时，Addmarker函数都会调用。

addMarker(object: any) {
  var myLatlng = new google.maps.LatLng(object.latitude, object.longitude);
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: myLatlng
  });
  this.addInfoWindow(marker, object);
}
addInfoWindow(marker, object){
  google.maps.event.addListener(marker, 'click', () => {
    this.event = {
      title: object.title,
      content: object.description
    }
    $("#over_map").slideToggle("slow");
  });
}

Answer 1

我也有类似的问题。这必须是Angulars变化检测的问题。从@angular/core导入NgZone，将其注入并尝试在这样的区域内运行回调：

google.maps.event.addListener(marker, 'click', () => {
    this.zone.run(() => {
        this.event = {
            title: object.title,
            content: object.description
        }
        $("#over_map").slideToggle("slow");
    });
});