如何获取NgRx Component Store状态内数组的长度

核心结论先给你：

1. 你写的userLength$ = this.select(state => state.users.length);逻辑本身是正确的，问题出在模板使用方式不对。
2. 不需要为这个需求专门创建selector，除非你要在多处复用这个逻辑，或者需要记忆化优化性能。

现有代码的问题 #

你模板里的两种写法都不对，核心原因是：

• this.select()返回的是Observable可观察流，不是普通的数值/数组，不能直接插值或者读取.length属性，必须通过async管道订阅后才能拿到真实值。
• 直接写{{users$.length}}拿到的永远是undefined——因为users$是流对象，不是你存的users数组本身，根本没有数组的length属性。

正确实现方式 #

单组件内使用（无需单独建selector） #

直接在组件内基于状态或已有选择器派生长度流即可，两种写法都可以：

import { map } from 'rxjs/operators';

// 写法1：直接从状态片段取长度
userLength$ = this.select(state => state.users.length);

// 写法2：复用已有的users$选择器派生
userLength$ = this.users$.pipe(map(users => users.length));

模板里必须搭配async管道使用，框架会自动处理订阅和取消订阅逻辑，不需要手动解绑：

<span>There are {{ userLength$ | async }} users</span>

小提示：如果后续调整状态结构，users可能为空的话，记得加兜底逻辑避免报错：state => state.users?.length ?? 0，空值时默认显示0。

不推荐直接在模板里用users$算长度：

<!-- 反面示例：async管道会触发两次重复订阅，有不必要的性能损耗 -->
<span>There are {{ (users$ | async)?.length }} users</span>

多场景复用场景（推荐抽独立selector） #

如果这个用户总数要在多个组件、服务里使用，或者状态变更很频繁需要做记忆化优化，就单独抽selector：
在状态定义文件里添加：

// 以NgRx写法为例，NgXS用@Selector()装饰器逻辑完全一致
import { createSelector } from '@ngrx/store';

const selectUserState = (state: AppState) => state.user; // 你的UserState片段选择器
const selectUsers = createSelector(selectUserState, (state: UserState) => state.users);
export const selectUserCount = createSelector(selectUsers, (users) => users.length);

组件里直接调用即可：

userCount$ = this.store.select(selectUserCount);

模板用法和之前一致，还是用async管道订阅输出。

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