时间戳

首页 > 解决方案 > 在 Angular NGXS 中将数据附加到状态

angular - 在 Angular NGXS 中将数据附加到状态

问题描述

由于我正在进行服务器端滚动，因此我对如何附加新数据有疑问。当新数据到达时，帖子正在删除旧数据但我只想追加新数据而不是删除帖子中的旧数据

TS

  page = 1;

    constructor(private store: Store) {
        this.store.dispatch(new GetPostsPerPage('', this.page.toString()));
    }

     onScroll() {
        this.store.dispatch(new GetPostsPerPage('', (this.page += 1).toString()));
      }

状态

@Action(GetPostsPerPage)
      getPostsPerPage(ctx: StateContext<PostStateModel>, { key, pageNumber }: GetPostsPerPage) {
        return this.postsService.getPostsPerPage(key, pageNumber).pipe(
          tap((result: Post[]) => {
            console.log(result);
            ctx.patchState({
              posts: result['data'],
            });
          }),
          catchError(err => {
            console.log(err);
            return throwError(err);
          })
        );
      }

标签： angularangular6ngxsangular-state-managmement

解决方案

修补状态时，您需要将结果附加到当前状态值，而不是用posts: result['data'].

在您的tap运营商中，您可以使用传播来附加新帖子：

var currentPosts = ctx.getState().posts;
ctx.patchState({
 posts: [...currentPosts, ...result['data']]
});

NGXS 还具有一些（相对较新的）内置状态运算符，可以更轻松地处理这些场景，具体请参见运算符的文档append。

推荐阅读