Angular 13中如何将Observable值存入组件变量？

你的问题根源在于：user$ Observable的类型是Observable<ApplicationUser | null>（因为BehaviorSubject的初始值是null），但组件里定义的user变量是ApplicationUser类型，两者类型不匹配导致报错。下面是几种正确的写法：

方案一：调整变量类型，允许null #

把组件里的user变量类型改为和Observable输出一致的ApplicationUser | null：

user: ApplicationUser | null = null;

ngOnInit(): void {
  this.authService.user$.subscribe(test => {
    this.user = test;
  });
}

后续使用this.user时，记得先判断是否为null，比如：

if (this.user) {
  console.log(this.user.userName);
}

方案二：过滤null值后再订阅 #

如果能确定订阅时user$发出的一定是有效的ApplicationUser（比如用户已登录），可以用filter操作符过滤掉null值，确保回调里的值类型正确：

import { filter } from 'rxjs/operators';

user!: ApplicationUser;

ngOnInit(): void {
  this.authService.user$
    .pipe(filter(user => user !== null))
    .subscribe(test => {
      this.user = test;
    });
}

方案三：使用非空断言（谨慎使用） #

如果你能100%确定当前场景下user$不会发出null，可以用非空断言!告诉TypeScript这个值不会为null：

user!: ApplicationUser;

ngOnInit(): void {
  this.authService.user$.subscribe(test => {
    this.user = test!;
  });
}

⚠️ 注意：非空断言只是绕过TypeScript的类型检查，如果实际运行中test为null，会直接导致运行时错误，所以只在确定值非空的场景下使用。

另外要注意：你第二种写法的错误在于，subscribe()方法返回的是Subscription订阅对象，不是Observable发出的用户数据，所以不能直接把它赋值给user变量。

内容的提问来源于stack exchange，提问作者Sylvain C.