Angular中如何将navigator获取的位置值正确传入Subscribe函数？

navigator.geolocation.getCurrentPosition是异步API，它不会阻塞后续代码执行。你的代码执行顺序是：

1. 调用getCurrentPosition并注册回调函数（此时还未获取到位置，this.lng和this.lat仍为初始值undefined）
2. 立即执行console.log("4 lng = " +this.lng)，输出undefined
3. 调用dbService.getLoginData，传入的this.lng和this.lat依然是undefined
4. 一段时间后位置获取成功，才会执行回调给this.lng和this.lat赋值，但此时服务请求已经发出

直接把getLoginData的调用移到getCurrentPosition的成功回调中，确保只有拿到位置数据后才发起请求：

lng : any;
lat : any;

ngOnInit(): void {
  navigator.geolocation.getCurrentPosition(r => {
    this.lng = String(r.coords.longitude);
    this.lat = String(r.coords.latitude);
    
    console.log("4 lng = " + this.lng); // 此时能正确输出经度
    
    // 获取到位置后再调用服务
    this.dbService.getLoginData('name', this.lng, this.lat).subscribe((res:any)=>{ 
      this.listHasil = res;
      this.collectionSize = res.length;
    });
  }, (error) => {
    // 处理定位失败的情况
    console.error('获取位置失败:', error);
  });
}

如果项目大量使用RxJS，可以把异步定位API包装成Observable，结合操作符避免嵌套订阅：
首先导入必要的RxJS工具：

import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

然后修改组件代码：

lng : any;
lat : any;

ngOnInit(): void {
  // 将getCurrentPosition包装为Observable
  const position$ = new Observable<GeolocationPosition>((observer) => {
    navigator.geolocation.getCurrentPosition(
      (pos) => observer.next(pos),
      (err) => observer.error(err)
    );
  });

  // 用switchMap合并流，避免嵌套订阅
  position$.pipe(
    switchMap((r) => {
      this.lng = String(r.coords.longitude);
      this.lat = String(r.coords.latitude);
      console.log("4 lng = " + this.lng);
      return this.dbService.getLoginData('name', this.lng, this.lat);
    })
  ).subscribe({
    next: (res:any) => {
      this.listHasil = res;
      this.collectionSize = res.length;
    },
    error: (err) => {
      console.error('请求失败:', err);
    }
  });
}

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