Angular订阅SQL数据库后，无法在TypeScript文件中获取用户数据

核心原因 #

HTTP请求是异步操作，subscribe的回调函数会在API响应返回后才执行，但你在回调外部直接访问this.users时，请求还没完成，数据还没被赋值，所以会得到undefined，进而导致读取fname属性报错。

代码问题排查 #

1. 模板变量错误：login.component.html里的*ngFor="let user of user"明显写错了，应该是*ngFor="let user of users"（遍历数组users而非单个变量user）。
2. 数据结构不匹配：从getUsers的实现看，你是根据userEmail查询单个用户，API返回的是单个用户对象，但组件里用数组this.users[0] = result存储，虽然DOM能渲染，但逻辑上没必要用数组，直接用单个变量更合理。

解决方案 #

方案1：将数据操作放在subscribe回调内

所有需要用到用户数据的代码，必须放在subscribe的回调函数里，确保数据已返回：

// login.component.ts
this.usersService.getUsers()
  .subscribe((result: users) => {
    this.users[0] = result;
    // 数据已赋值，可安全访问
    console.log(this.users);
    console.log(this.users[0].fname);
    sessionStorage.setItem('userDisplayName', this.users[0].fname);
  });

方案2：优化数据结构（推荐）

既然API返回单个用户，组件直接用单个变量存储，无需数组：

// login.component.ts
// 定义单个用户变量
user: users | undefined;

this.usersService.getUsers()
  .subscribe((result: users) => {
    this.user = result;
    console.log(this.user);
    sessionStorage.setItem('userDisplayName', this.user.fname);
  });

对应模板简化（不用*ngFor，直接访问单个用户）：

<!-- login.component.html -->
<div class="row" style="background-color:transparent;">
  <mat-card *ngIf="user" class="ecard">
    <mat-card-title>{{user.role}}</mat-card-title>
  </mat-card>
</div>

额外提示

• 牢记Angular中HTTP请求是异步的，不要在订阅外部直接依赖异步返回的数据。
• 可添加错误处理，避免请求失败时报错：

this.usersService.getUsers()
  .subscribe({
    next: (result: users) => {
      this.user = result;
      sessionStorage.setItem('userDisplayName', this.user.fname);
    },
    error: (err) => {
      console.error('获取用户数据失败:', err);
    }
  });

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