如何在Angular中显示NgRx Store内容 解决控制台输出undefined问题

你遇到的问题由3处错误导致，按下方修改即可正常展示：

• 错误1：select运算符用法错误
  你在调用select时传入了字符串'selectBugs'，该运算符需要直接接收你定义的选择器函数作为参数，而非选择器的变量名字符串，所以无法匹配到对应选择器，返回undefined。
• 错误2：bugs$未声明为组件类的公共属性
  你在setTimeout内部通过const定义的bugs$是局部变量，仅能在setTimeout回调内部访问，组件模板无法读取该变量，导致模板渲染失败白屏。
• （可选优化）选择器层级可简化
  你当前注册的根Store结构为根State.bugs = reducer返回的{ bugs: Bug[] }对象，当前选择器返回的是带层级的对象，可以简化选择器直接返回bug列表，减少模板取值层级。

完整修改代码示例 #

组件代码修改

// 顶部先导入你定义的选择器
import { selectBugs } from './你存放选择器的文件路径';

@Component({
  selector: 'app-root',
  template: `
    <!-- 用as关键字简化重复的async管道调用 -->
    <div *ngIf="bugs$ | async as bugState">
      bugs: {{ bugState.bugs | json }}
    </div>
  `
})
export class AppComponent {
  // 将bugs$声明为类的公共属性，初始化时直接绑定Store选择器
  bugs$ = this.store.pipe(select(selectBugs));

  constructor(private store: Store<any>) {
    // 触发新增action
    this.store.dispatch(
      addBugAction({
        x: 100,
        y: 200
      })
    );

    // 测试日志可直接订阅类属性，不需要延迟调用
    this.bugs$.subscribe(console.log);
  }
}

（可选）简化选择器

如果希望简化模板取值，可修改选择器如下：

// 先定位到reducer对应的State节点
const selectBugsState = (state: any) => state.bugs;
// 直接返回bug列表
export const selectBugsList = createSelector(
  selectBugsState,
  (bugState) => bugState.bugs
);

修改后组件模板可以简化为：

<div *ngIf="bugs$ | async as bugs">
  bugs: {{ bugs | json }}
</div>

修改完成后即可在页面正常展示bugs数组内容，控制台也会正常输出对应的Store数据，不再返回undefined。

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