Angular Http Client调用无组件返回值但网络请求成功问题

你的问题核心是异步请求的时序问题：this.myService.getData()是异步操作，subscribe的回调会在HTTP请求完成后才执行，但this.loadMap()是同步执行的，所以代码会先跑loadMap()，这时候this.data还没被赋值，自然为空。

下面是几种可行的解决方案：

方案1：将地图初始化逻辑放到请求成功的回调中 #

这是最直接的解决方式，确保只有当数据成功返回并赋值后，才初始化地图：

ngOnInit(): void {
    this.myService.getData().subscribe(
        (result) => {
            this.data = result.body;
            // 数据就绪后再加载地图
            this.loadMap();
        }, 
        (result: HttpErrorResponse) => {
            console.log(result.error);
            // 可添加错误提示，比如显示加载失败
        }
    );
}

方案2：用async/await简化异步代码（更易读） #

把Observable转为Promise，用async/await让异步逻辑看起来像同步执行：

import { lastValueFrom } from 'rxjs'; // Angular 12+推荐用lastValueFrom替代已废弃的toPromise

async ngOnInit(): Promise<void> {
    try {
        const result = await lastValueFrom(this.myService.getData());
        this.data = result.body;
        this.loadMap();
    } catch (error) {
        if (error instanceof HttpErrorResponse) {
            console.log(error.error);
        }
    }
}

方案3：用路由Resolve守卫实现组件渲染前加载数据 #

如果这个地图组件是通过路由访问的，可以用Resolve守卫在路由激活前完成数据加载，确保组件初始化时this.data已经存在：

1. 创建Resolve服务：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { MyService } from './my.service';

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<any> {
    constructor(private myService: MyService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return this.myService.getData();
    }
}

2. 配置路由：

const routes: Routes = [
    {
        path: 'map',
        component: MapComponent,
        resolve: { data: DataResolver }
    }
];

3. 在组件中获取预加载的数据：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    this.data = this.route.snapshot.data['data'].body;
    this.loadMap();
}

关于你之前尝试的方法为什么无效 #

• 给loadMap()加判断：如果只是在loadMap()里判断!this.data就返回，那需要在this.data赋值后手动调用loadMap()，否则地图永远不会加载。不如直接把loadMap()放到请求回调里靠谱。
• *ngIf没效果：大概率是用法不对，正确的做法是用*ngIf="data"包裹地图容器，确保只有数据存在时才渲染地图元素，再结合数据回调初始化地图：

<!-- 模板中 -->
<div *ngIf="data" id="map-container"></div>

// 组件中
ngOnInit(): void {
    this.myService.getData().subscribe(
        (result) => {
            this.data = result.body;
            // 确保容器已渲染后再加载地图
            setTimeout(() => this.loadMap(), 0);
        }
    );
}

也可以结合async管道简化：

// 组件中定义Observable
data$ = this.myService.getData().pipe(map(res => res.body));

ngOnInit(): void {
    this.data$.subscribe(data => {
        this.data = data;
        this.loadMap();
    });
}

<!-- 模板中 -->
<div *ngIf="data$ | async as data" id="map-container"></div>

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