如何从NgRx选择器获取存储值而非Observable对象

你遇到的问题是因为NgRx的select方法返回的是Observable对象，直接在页面绑定会显示对象本身，需要通过订阅获取实际值。以下是两种常用解决方式：

方式一：使用AsyncPipe（推荐） #

这是Angular官方推荐的方式，它会自动帮你完成订阅和取消订阅，避免内存泄漏。

1. 在组件类中定义Observable变量：

trackLength$ = this.store.select(getTrackLength);

2. 在模板中通过async管道解析Observable：

<p>Track Length: {{ trackLength$ | async }}</p>

方式二：手动订阅Observable（需注意内存管理） #

如果需要在组件逻辑中处理数值，可以手动订阅，但必须在组件销毁时取消订阅：

1. 在组件类中添加变量和订阅逻辑：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

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

ngOnInit() {
  this.store.select(getTrackLength)
    .pipe(takeUntil(this.destroy$))
    .subscribe(length => {
      this.trackLength = length;
    });
}

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

2. 模板中直接绑定数值变量：

<p>Track Length: {{ trackLength }}</p>

额外建议：修正Selector命名冲突 #

你的feature selector和action同名（都叫setTrackLength），容易造成代码混淆，建议修改selector的命名：

// selector.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { TrackState } from './track.state';

// 重命名为selectTrackState，避免和action冲突
export const selectTrackState = createFeatureSelector<TrackState>('trackState');

export const getTrackLength = createSelector(
  selectTrackState,
  (state) => state.trackLength
);

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