AGM映射绑定问题

Question

目标是在地图上绘制圆，以定义geofence规则，并根据圆的坐标和半径更新表单域。

我将radius_changed处理添加到了handle完全句柄中，如下所示：

const _self = this;
const precision = 1000000;
// handle draging
google.maps.event.addListener(circle, 'radius_changed', function () {
  _self.updateLocationData({
    latitude: Math.round(circle.getCenter().lat() * precision) / precision,
    longitude: Math.round(circle.getCenter().lng() * precision) / precision,
    radius: Math.round(circle.getRadius())
  });
});

它触发定义如下的updateLocationData方法：

updateLocationData(data: any) {
this.circleUpdateSource$.next(data);

}

我在ngOnInit中订阅的内容：

this.circleUpdateSource.subscribe((data: any) => {
  console.log(data);
  this.test = data.radius;
  this.rule = {
    radius: data.radius,
    lat: data.latitude,
    lng: data.longitude
  };
});

除了将订阅中的数据绑定到模板之外，一切都运行得很好。当事件被触发时，测试立即输出，但{{ Console.log }}或{{rule}}仅在光标移出圆圈或单击圆圈外的地图后才会更新。有什么想法吗？

Answer 1

我发现了别人可以从中受益的诀窍！您需要手动调用tick来触发模板中的更新！

this.appRef.tick();

在导入中：

ApplicationRef

在构造函数中：

private appRef: ApplicationRef