Angular NgRx问题：选择器返回null而非数据

你的问题核心在于初始状态下heroes为null，选择器会直接返回这个初始值，导致页面加载时显示null；另外代码里还有一处语法错误需要先修复。

1. 修复app.component.ts的语法错误 #

你的heroes$初始化多了一组冗余括号，先修正：

heroes$: Observable<SuperHeroInterface[] | null> = new Observable<SuperHeroInterface[] | null>();
// 去掉末尾多余的();

2. 处理初始null的显示问题 #

页面加载时API请求尚未完成，Redux状态里的heroes是初始的null，这是正常流程，但你可以通过以下方式优化：

方式一：用*ngIf避免显示null #

在模板中添加条件判断，仅当数据存在时才渲染内容：

<div *ngIf="heroes$ | async as heroes">
  {{ heroes | json }}
</div>
<ng-template #loading>
  加载中...
</ng-template>

方式二：给选择器设置默认空数组 #

修改选择器，当heroes为null时返回空数组，页面初始会显示空数组而非null：

// selectors.ts
export const dataSuperHeroSelector = createSelector(
    superHeroFeatureSelector,
    (superHeroState: SuperHeroStateInterface) => superHeroState.heroes || []
)

3. 可选：修改初始状态为空白数组 #

如果业务逻辑允许，直接把初始状态的heroes设为空数组而非null，从根源避免null的出现：

// reducers.ts
const initialState: SuperHeroStateInterface = {
    heroes: [], // 替换null为[]
}

同时更新状态接口的类型定义：

export interface SuperHeroStateInterface {
    heroes: SuperHeroInterface[]; // 移除| null
}

这样选择器会始终返回数组类型，无需额外处理null场景。

4. 验证Store配置正确性 #

确保你在StoreModule中正确注册了superHeroes feature：

// app.module.ts
StoreModule.forRoot({
  superHeroes: superHeroesReducer // 这里的key要和createFeatureSelector里的'superHeroes'完全一致
})

以上方案可解决页面显示null以及潜在的cannot read properties of undefined错误。

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