2

我已经在我的 Angular 应用中成功实现了删除评论功能。我现在的问题是评论的点赞功能。我如何实现类似的功能。我有变量 is_liked 来确定它是否喜欢。value = 0 表示不喜欢， value = 1 表示喜欢。请在此处查看我的 stackblitz 链接

请点击此链接

onLikeComment(data: Comment) {
    this.store.dispatch(new LikeComment(data)).subscribe();
  }

@Action(LikeComment)
  likeComment(
    ctx: StateContext<PostStateModel>,
    { payload }: LikeComment
  ) {
    if (payload.is_liked === 1) {
      payload.is_liked = 0;
    } else {
      payload.is_liked = 1;
    }
    const state = ctx.getState();
    ctx.setState(
      patch({
        post: {
          ...state.post,
          comments: [
            ...state.post.comments,
            updateItem<any>(name => name === payload.id, payload)
          ]
        }
      })
    );
  }
4

3 回答 3

2

您在代码中遇到的主要问题是updateItem状态运算符的使用。需要将此运算符分配给您传递给patch运算符的对象中的字段。

patch({
  field1: 'someValue',
  comments: updateItem<Comment>(
    comment => comment.id === 0,
    {id: 0, text: 'This is a nice post!', is_liked: 1}
  )
})

更新项目参考

我在您的操作处理程序中看到的第二个问题是您没有正确使用补丁运算符。此运算符仅允许将值分配给要更改的字段，例如StateContext.patchState。

我会将您的代码更改为：

  @Action(LikeComment)
  likeComment(
    ctx: StateContext<PostStateModel>,
    { payload }: LikeComment
  ) {
    const isLiked = payload.is_liked === 1 ? 0 : 1;

    ctx.setState(
      patch({
        // Apply patch on the post to only update the comments field
        post: patch({
          // Apply updateItem to make the operator only update the item that matches the condition
          comments: updateItem<Comment>(
            comment => comment.id === payload.id,
            // Apply a patch on the found comment to only change the is_liked field.
            patch({is_liked: isLiked}))
        })
      })
    );
  }

希望这是有道理的。这是我对 SO 的第一个回答 :)

这是更新的堆栈闪电战

于 2019-11-24T14:10:02.963 回答
0

我是 NGXS 的新手，但我能够通过使用内置运算符来做到这一点。在这个阶段，我认为不需要添加像 Immer 这样的不变性工具。

这是我的数据的样子：

const jobs = [
  {
    id: 0,
    tasks: [
      {
        id: 0,
        status: 'To Do',
        ...
      }
  ... 
  }
]

这是更新嵌套对象的操作：

  @Action(SetJob)
  setTask(ctx: StateContext<JobsStateModel>, { payload }: SetJob) {
    ctx.setState(
      patch({
        jobs: updateItem((item: any) => item.status === payload.status, patch({ tasks: insertItem(payload, 1) })),
      })
    );
  }
于 2022-01-05T14:41:35.347 回答
-1

您可以按如下方式处理“喜欢”功能。

ctx.setState(
      patch({
        post: {
          ...state.post,
          comments: this.getUpdatedComments(state, payload)
        }
      })
    );

getUpdatedComments(state, payload): any {
      let comments = [];
      state.post.comments.forEach((cmt) => {
          if (cmt.id === payload.id) {
              cmt = Object.assign({}, cmt);
              cmt.is_liked = payload.is_liked === 1 ? 0 : 1;
          }
          comments.push(cmt);
      });
      return comments;
  }

这是更新的演示 - https://stackblitz.com/edit/ngxs-delete-like-dek3s1。

于 2019-11-24T08:37:49.273 回答