Ngrx Effect获取本地JSON数据时NgFor仅支持迭代数组报错如何解决

你遇到的错误核心原因是*ngFor尝试遍历非数组类型的值，总共4处入门阶段容易踩的小问题需要修改：

1. Effect中返回值取值错误 #

• 原因：http请求返回的结果是{posts: Post[]}格式的包裹对象，但你直接把整个对象传给了成功action的posts字段，导致存入store的posts不是数组，而是{posts: []}这个对象
• 修复：修改posts.effects.ts里的map逻辑，取出对象里的posts数组：

// 原代码
map(posts => ({type: '[PostsComponent] Load Posts Successed', posts: posts})),
// 修改为
map(res => ({type: '[PostsComponent] Load Posts Successed', posts: res.posts})),

2. 成功Action的Type定义拼写错误 #

• 原因：在posts.actions.ts里定义getAllPostsSuccessed的type时多打了一个左方括号，变成了[[PostsComponent] Load Posts Successed，和Effect里触发的type对不上，导致reducer收不到成功事件，不会更新store里的posts值
• 修复：修改posts.actions.ts里的type，删掉多余的左方括号：

// 原代码
export const getAllPostsSuccessed = createAction(
  '[[PostsComponent] Load Posts Successed',
  props<{posts: Post[]}>()
);
// 修改为
export const getAllPostsSuccessed = createAction(
  '[PostsComponent] Load Posts Successed',
  props<{posts: Post[]}>()
);

3. 组件中posts变量无初始值 #

• 原因：在PostsComponent里定义posts: Post[];没有赋值初始值，页面初次渲染时*ngFor会尝试遍历undefined，也会触发同类报错
• 修复：给posts变量设置空数组初始值：

// 原代码
posts: Post[];
// 修改为
posts: Post[] = [];

4. Selector导入路径拼写错误 #

• 原因：你的selector文件名是posts.selectors.ts，但在组件里导入时少写了末尾的s，写成了./state/posts.selector，会导致无法正确取到store里的posts值
• 修复：修改posts.component.ts里的导入语句：

// 原代码
import { posts } from "./state/posts.selector";
// 修改为
import { posts } from "./state/posts.selectors";

可选优化 #

你在html里封装的getPosts getter没有额外逻辑，可以直接删除，直接遍历posts变量即可。还可以把limit的切片逻辑直接放在模板里，简化代码：

<div class="post" *ngFor="let post of posts | slice:0:limit">

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