Angular2 - 在回调函数上设置的组件变量值未在模板中更新

Question

用户案例：在 Web 浏览器中打开应用程序时，用户会得到带有选项 "Allow" 和 "Deny".

的更改 - "Know your location"

我有以下代码示例。

ngOnInit() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      this.zoom = 18;
    });
  }
}

正如我所见console.log如果允许，纬度和经度的最终值是当前位置，否则它是我硬编码的默认值。

现在我的问题是，在打印 {{latitude}} 和 {{longitude}}

时，无法在模板中看到更新后的当前位置更改

我尝试过使用 ngZone 和 ChangeDetectorRef 但没有成功

谁能帮忙

Answer 1

地理位置 API 未被 Angular 区域覆盖。明确地在 Angular 区域中进行回调运行，并且 Angular 变化检测将运行并确保更新视图：

constructor(private zone:NgZone) {}

ngOnInit() {
  if ("geolocation" in navigator) {                
    navigator.geolocation.getCurrentPosition((position) => {
      this.zone.run(() => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 18;
      });
    });
  }
}

Angular2 - 在回调函数上设置的组件变量值未在模板中更新

Angular2 - Component variable value set on callback function not updated in template

google-geolocation

angular2-template

angular2-components

angular