Angular变量无法显示：如何在前端展示经纬度变量？

嘿，我一眼就看出问题出在哪了——你在subscribe的回调里声明的是局部变量，根本没赋值给组件类的属性，模板自然绑定不到啦！

问题根源 #

你写的这段代码里：

next(position) {
  console.log('Current Position: ', position);
  let latitude = position.coords.latitude; // 这是回调内部的局部变量
  let longitude = position.coords.longitude; // 模板根本访问不到它！
}

这里用let声明的latitude和longitude只在这个next函数内部有效，和你模板里{{ latitude }}绑定的组件类属性完全不是一回事。

修复步骤 #

1. 先在组件类里定义公开的属性

首先确保你的组件类里有这两个属性（Angular模板默认只能访问public属性，所以最好显式声明）：

import { Component } from '@angular/core';
// 别忘了导入你用到的Observable相关依赖

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 定义公开的位置属性，初始值可以设为undefined或者null
  public latitude: number | undefined;
  public longitude: number | undefined;

  constructor() {
    // 这里放你的位置订阅逻辑
  }
}

2. 修改订阅代码，赋值给组件属性

把回调里的局部变量改成用this.访问组件类的属性，注意要用箭头函数确保this指向组件实例（你现在的写法已经是箭头函数风格的回调了，刚好合适）：

// Call subscribe() to start listening for updates.
const locationsSubscription = locations.subscribe({
  next: (position) => {
    console.log('Current Position: ', position);
    // 去掉let，直接赋值给组件的属性
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
  },
  error: (msg) => {
    console.log('Error Getting Location: ', msg);
  }
});

3. 可选：添加空值保护优化体验

因为位置数据是异步获取的，初始时latitude和longitude是undefined，你可以在模板里用安全导航操作符或者*ngIf避免显示空值：

<!-- 用安全导航操作符?. -->
<p>Latitude: <span id="latitude">{{ latitude?.toFixed(6) }}</span></p>
<p>Longitude: <span id="longitude">{{ longitude?.toFixed(6) }}</span></p>

<!-- 或者用*ngIf控制显示 -->
<p *ngIf="latitude">Latitude: <span id="latitude">{{ latitude }}</span></p>
<p *ngIf="longitude">Longitude: <span id="longitude">{{ longitude }}</span></p>

这样修改后，当Observable推送位置数据时，组件的属性会更新，Angular的变更检测会自动把新值同步到模板上，你就能看到 latitude 和 longitude 显示出来啦！

内容的提问来源于stack exchange，提问作者Mathias