首页 > 解决方案 > NgRx 参数化选择器显示空结果

问题描述

尝试在 NgRx 中使用参数化查询,但结果为空。

下面是 stackblitz 版本的代码:https ://stackblitz.com/edit/ngrx-parameterized-query

减速机代码

export const userAdapter = createEntityAdapter<UserModel>({
  selectId: x => x.UserId
});
export interface UserlistState extends EntityState<UserModel>{

};

export const initialState: UserlistState = userAdapter.getInitialState({

}); 


export function UserlistReducers(
  state: UserlistState = initialState,
  action: actions.UserlistActions
){
  switch(action.type){

    case actions.UserlistActionTypes.UPSERT_USERS:
      return userAdapter.upsertMany(action.users,state);

    default:
      return state;
  }
}

export const getUserlistState = createFeatureSelector<UserlistState>('userlist');

export const {
  selectIds,
  selectEntities,
  selectAll,
  selectTotal
} = userAdapter.getSelectors(getUserlistState);

export const getUsersByOrganizationId = createSelector(selectAll,
    (users: Array<UserModel>, organization_id: number)=>{
        return users.filter(x=> x.OrganizationId == organization_id)
    }
)

用法

watchlist = ():Observable<UserModel[]> =>{
        return this.userlistStore.select(reducers.selectAll);
    }

    watchlistByOrganizationId = (organization_id: number): Observable<UserModel[]> =>{
        return this.userlistStore.select(reducers.getUsersByOrganizationId(organization_id));
    }

标签: javascriptangularngrx

解决方案


你的选择器是错误的。

应该是这样的;这organization_id是选择器函数的参数,因此它在函数范围内可用,无需将其添加到箭头函数参数列表中。将selectAll返回用户并将其作为参数传递给箭头函数。以下应该按预期工作!

export const getUsersByOrganizationId = (organization_id: number) => createSelector(selectAll,
  (users: Array<UserModel>) => {
    return users.filter(x => x.OrganizationId == organization_id)
  }
);

StackBlitz 没有错误。


推荐阅读