Angular调用API获取数据，组件内数据显示为undefined问题

核心问题 #

你的代码存在两个关键问题导致数据显示undefined：

1. getUserInfo()无有效返回值：该方法内部仅订阅了Observable，但本身没有返回任何值，默认返回undefined，所以其他组件直接赋值this.userDetails = this._userconfigs.getUserInfo()时，拿到的就是undefined。
2. 异步操作时机不匹配：HTTP请求是异步的，subscribe内的代码要等请求完成后才会执行，但组件在ngOnInit里同步调用getUserInfo()并赋值，此时请求还未完成，自然拿不到数据。

代码修正步骤 #

1. 先修复Service的HTTP请求参数问题

Angular的HttpClient.get第二个参数是配置对象，headers需要放在该对象内，且推荐使用HttpHeaders而非旧的Headers：

import { HttpHeaders } from '@angular/common/http';

getUserData(userId: string): Observable<any> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  // 注意：如果需要传userId，应该拼在URL里或者作为查询参数，当前代码未使用传入的userId参数
  return this.http.get<any[]>("user/get", { headers: headers });
}

2. 方案一：让getUserInfo()返回Observable，由组件订阅

修改userconfigs.ts的getUserInfo，返回处理后的Observable，而非直接内部订阅：

import { map } from 'rxjs/operators';

getUserInfo(): Observable<any> {
  return this.service.getUserData(userId).pipe(
    map(response => {
      if (response != null) {
        this.myDetails.Name = response[0].name;
        this.myDetails.Age = response[1].age;
        // ...其他属性赋值
        return this.myDetails;
      }
      return null;
    })
  );
}

然后在首页组件里订阅这个Observable（注意ngOnInit的拼写，首字母O和I要大写）：

ngOnInit() {
  this._userconfigs.getUserInfo().subscribe(details => {
    this.userDetails = details;
  });
}

3. 方案二：用BehaviorSubject实现多组件数据共享（更推荐）

如果多个组件需要共享用户数据，避免重复发起HTTP请求，可以用BehaviorSubject维护状态：
在userconfigs.ts里：

import { BehaviorSubject } from 'rxjs';

private myDetailsSubject = new BehaviorSubject<any>(null);
// 对外暴露只读的Observable
public myDetails$ = this.myDetailsSubject.asObservable();

getUserInfo() {
  // 避免重复请求：如果已有数据就不再发起请求
  if (this.myDetailsSubject.value) return;
  
  this.service.getUserData(userId).subscribe(response => {
    if (response != null) {
      this.myDetails.Name = response[0].name;
      this.myDetails.Age = response[1].age;
      // ...其他属性赋值
      // 发送更新后的数据给所有订阅者
      this.myDetailsSubject.next(this.myDetails);
    }
  });
}

然后在各个组件里订阅这个共享的Observable：

ngOnInit() {
  // 订阅数据更新
  this._userconfigs.myDetails$.subscribe(details => {
    this.userDetails = details;
  });
  
  // 触发数据加载（如果还没加载的话）
  this._userconfigs.getUserInfo();
}

额外注意点 #

• 确保userId参数正确传递到getUserData方法中，当前Service代码里的userId参数未被使用，可能导致请求目标错误。
• 模板中可以用*ngIf="userDetails"避免数据未加载时显示undefined，比如：

<div *ngIf="userDetails">
  姓名：{{ userDetails.Name }}
  年龄：{{ userDetails.Age }}
</div>

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