Angular 6从Service获取返回值异常：报错与undefined问题咨询

看起来你已经排查了基础的语法错误，接下来咱们一步步解决剩下的问题：

1. 先确认RxJS操作符的正确使用（关键！） #

从你的代码来看，大概率是RxJS版本不兼容导致map操作没执行，进而this.user没被赋值。Angular 6+的RxJS已经改用pipe包裹操作符，并且Observable.of也被废弃了，咱们先修正这部分：

修正AuthService中的导入和操作符使用 #

// 先导入正确的RxJS工具
import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 修正getUser方法（如果继续用原来的方式的话）
getUser(): Observable<UserModel> { 
  return of(this.user); // 用of代替Observable.of
}

// 修正login方法的map操作
login(login: string, password: string) {
  const data = {'login': login, 'password': password};
  return this.http.post(`login/`, data)
    .pipe( // 用pipe包裹map操作符
      map(userData => { // 这里变量名token不太准确，改成userData更清晰
        console.log('后端返回的用户数据:', userData); // 先打日志确认数据结构
        this.user = new UserModel().deserialize(userData);
        console.log('赋值后的user:', this.user); // 确认赋值是否成功
        return this.user;
      })
    );
}

2. 排查deserialize方法的有效性 #

你的UserModel.deserialize方法本身没问题，但要确保后端返回的userData结构和UserModel的字段匹配（比如包含first_name、last_name）。如果后端返回的是token而不是用户信息，那你需要先调用获取用户信息的接口，再赋值给this.user。

3. 更可靠的方案：用BehaviorSubject管理用户状态 #

普通变量+of的方式有个缺陷：如果组件在用户登录完成后才订阅getUser()，会拿不到最新的数据。改用BehaviorSubject可以完美解决这个问题，这也是Angular中管理全局状态的常用方式：

重构AuthService #

import { Injectable, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UserModel } from './user.model';

@Injectable({ providedIn: 'root' })
export class AuthService implements OnDestroy {
  // 创建一个BehaviorSubject，初始值为null
  private userSubject = new BehaviorSubject<UserModel | null>(null);
  // 对外暴露只读的Observable，防止外部修改内部状态
  public user$: Observable<UserModel | null> = this.userSubject.asObservable();

  constructor(private http: HttpClient) {}

  login(login: string, password: string) {
    const data = { login, password };
    return this.http.post(`login/`, data)
      .pipe(
        map(userData => {
          const user = new UserModel().deserialize(userData);
          // 更新subject的值，所有订阅者都会收到通知
          this.userSubject.next(user);
          return user;
        })
      );
  }

  // 可选：添加logout方法清空用户状态
  logout() {
    this.userSubject.next(null);
    // 这里可以添加清空token、跳转登录页等逻辑
  }

  ngOnDestroy() {
    this.userSubject.complete();
  }
}

在HomeComponent中使用 #

export class HomeComponent implements OnInit {
  user: UserModel | null = null;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    // 直接订阅user$，会立即收到当前最新的用户数据
    this.authService.user$.subscribe(user => {
      this.user = user;
      console.log('获取到的用户数据:', this.user);
    });
  }
}

4. 调试小技巧 #

如果还是有问题，按以下步骤排查：

• 在login方法的map里打印后端返回的userData，确认数据结构是否正确
• 打印new UserModel().deserialize(userData)的结果，确认转换是否成功
• 确认登录请求是否真的成功（可以在浏览器开发者工具的Network标签查看请求状态和响应）

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