时间戳

首页 > 解决方案 > 如何从数组列表中删除数据 - NGXS 状态管理

angular - 如何从数组列表中删除数据 - NGXS 状态管理

问题描述

我在尝试 NGXS 状态管理时遇到了问题，问题是如果我使用 id 从数组中删除记录，那么整个数组就会变空。这是我的用户状态的样子。

@State<UserStateModel>({
  name: "users",
  defaults: {
    users: [
      {
        id: 179,
        name: "test",
        email: "test@gmail",
      },{
        id: 190,
        name: "test12",
        email: "test12@gmail",
      }
    ],
  },
})

这就是删除操作的样子

 @Action(DeleteUser)
  delete(
    { getState, patchState, setState }: StateContext<UserStateModel>,
    { id }
  ) {
    const state = getState();

    setState(
      patch({
        users: state.users.filter((user) => {
          user.id !== id;
        }),
      })
    );
  }

这就是我在组件中调度动作的方式

export class IndexComponent implements OnInit {
  // users: Observable<User>;

  @Select(UserState.getUsers) users: Observable<User>;

  constructor(private store: Store) {}

  deleteUser(id: number) {
    this.store.dispatch(new DeleteUser(id));
  }
}

标签： angulartypescriptngxsangular-state-managmement

解决方案

经过几个小时的尝试终于找到了解决方案并解决了问题。首先，点击这里浏览 NGXS 状态算子官方文档。

“removeItem”操作符是解决这个问题的方法。

import {
  patch,
  removeItem
} from "@ngxs/store/operators";

export class UserState {
    @Action(DeleteUser)
          delete(
            { getState, patchState, setState }: StateContext<UserStateModel>,
            { id }
          ) {
            const state = getState();
        
            setState(
              patch({
                users: removeItem<User>((user) => user.id === id),
              })
            );
          }
    }

希望这会有所帮助。

推荐阅读