Angular中使用RxJS map操作符出现slice未定义错误，如何修复？

我一眼就看出问题出在哪了——你在getPosts方法的订阅回调里犯了个小疏忽，直接导致了这个报错。

错误根源分析 #

你的代码里，pipe(map(...))已经把后端返回的postData转换成了一个完整的Post[]数组（也就是transformedPosts），但你在subscribe回调里却错误地尝试访问transformedPosts.posts。实际上transformedPosts本身就是处理好的帖子数组，根本没有posts这个属性！

这就导致this.posts被赋值成了undefined，当你调用this.postUpdated.next([...this.posts])时，展开undefined会传递一个无效值给订阅者，最终在组件中触发了slice方法调用在undefined上的错误。

修复步骤 #

只需要修改getPosts方法里的subscribe回调部分，把transformedPosts.posts改成transformedPosts即可：

getPosts(){
  this.http.get<{message: string, posts: any}>('http://localhost:3000/api/posts')
  .pipe(map((postData) => {
    return postData.posts.map(post => {
      return {
        title: post.title,
        content: post.content,
        id: post._id
      };
    });
  })).subscribe(transformedPosts => {
    // 直接赋值转换后的数组，而非访问不存在的posts属性
    this.posts = transformedPosts;
    this.postUpdated.next([...this.posts]);
  });
}

额外优化建议 #

另外你的addPost方法还有个小问题：当前你直接把前端创建的id: null的帖子push到数组里，但后端应该会返回新创建帖子的真实ID。可以修改post请求的处理逻辑，把后端返回的ID更新到帖子对象上，保证数据一致性：

addPost(title: string, content: string){
  const post: Post ={id: null, title: title, content: content };
  // 调整返回类型，获取后端返回的postId
  this.http.post<{message: string, postId: string}>('http://localhost:3000/api/posts',post)
  .subscribe((responseData) => {
    console.log(responseData.message);
    // 将帖子ID更新为后端返回的真实值
    post.id = responseData.postId;
    this.posts.push(post);
    this.postUpdated.next([...this.posts]);
  })
}

这样就能彻底解决这个错误，同时让你的数据流程更严谨。

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