如何在组件中使用@ngrx/store？选择器返回Observable类型问题如何解决

你的选择器定义、NgRx取值的基础实现完全没有问题，报错的核心原因是 this.store.select(selectId) 返回的是 Observable 类型的数据流容器，而非直接的number类型值，不能直接和普通number做相等判断。你在模板中用{{id$ | async}}能正常取值，是因为async管道默认帮你完成了「订阅数据流→取出最新值→组件销毁时自动取消订阅」的整套逻辑。

解决方案 #

方案1：单次取值用RxJS工具类获取当前值（推荐单次判断场景） #

RxJS 7及以上版本可以用firstValueFrom封装Observable，配合async/await同步写法拿到值：

import { firstValueFrom } from 'rxjs';

async ngOnInit(): Promise<void> {
  const currentId = await firstValueFrom(this.id$);
  console.log(currentId === 0);
}

方案2：订阅数据流持续监听值变化（推荐值变更时需要触发逻辑的场景） #

如果需要每次id变化都执行对应逻辑，直接订阅Observable即可，注意配合操作符避免内存泄漏：

import { takeUntil, take } from 'rxjs';
import { Subject } from 'rxjs';

// 只需要取一次值的简化写法，订阅后自动取消
ngOnInit(): void {
  this.id$.pipe(take(1)).subscribe(currentId => {
    console.log(currentId === 0);
  });
}

如果需要持续监听值变化，用销毁信号统一处理订阅回收：

private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.id$.pipe(takeUntil(this.destroy$)).subscribe(currentId => {
    // 每次id更新都会执行此处逻辑
    console.log(currentId === 0);
  });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

方案3：转Signal同步取值（Angular 16+ 推荐） #

如果使用Angular 16及以上版本，可以用toSignal把Observable转为信号，直接同步读取最新值：

import { toSignal } from '@angular/core/rxjs-interop';

// 组件内定义信号
id = toSignal(this.id$, { initialValue: 0 });

ngOnInit(): void {
  // 直接调用信号函数获取最新值
  console.log(this.id() === 0);
}

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