从ngrx存储管道选择器返回Observable

问题描述

我有一个ngrx存储选择器：

export const selectActivePracticeUsersListSnapshot = pipe(
  select(selectPracticeUsersList),filter((users) => !!users),take(1),map((users) => users.filter((user) => user.active))
);

我有一个注入到包含以下方法的多个组件中的服务：

public getTeamMembersWithAccess(permission: string): string[] {
  let flagAvatars: string[];
  this.store.dispatch(loadUsers());
  this.store.pipe(selectActivePracticeUsersListSnapshot).subscribe((activePracticeUsers) => {
    flagAvatars = activePracticeUsers.reduce((teamMembers,activeUser) => {
      if (!!activeUser.permissions[permission]) {
        const { firstName,lastName } = activeUser;
        return [...teamMembers,`${firstName} ${lastName}`];
      }
      return teamMembers;
    },[]);
  });
  return flagAvatars;
}

我从组件中这样称呼它：

constructor(private helperService: HelperService) {
  const flagAvatars = this.helperService.getTeamMembersWithAccess('AdminPage');
}

我的问题是，由于 let flagAvatars：string []; ，服务方法返回未定义的结果，因为对存储选择器的预订正在等待 loadUsers（ ）完成。我知道我需要更改 getTeamMembersWithAccess（）方法以某种方式返回 Observable ，但是我不确定如何编写。我已经尝试了多种方法，但是无法正确完成。可以肯定的是，我需要使用地图而不是订阅，但无法弄清楚该如何写。

解决方法

您的陈述完全正确，我将帮助您使其具体化。

尝试一下：

服务：

import { map } from 'rxjs/operators';
......
public getTeamMembersWithAccess(permission: string): Observable<string[]> {
  this.store.dispatch(loadUsers());
  this.store.pipe(selectActivePracticeUsersListSnapshot).pipe(
   map((activePracticeUsers) => {
    // flagAvatars equals this,so let's just return it right away in the map
    return activePracticeUsers.reduce((teamMembers,activeUser) => {
      if (!!activeUser.permissions[permission]) {
        const { firstName,lastName } = activeUser;
        return [...teamMembers,`${firstName} ${lastName}`];
      }
      return teamMembers;
    },[]);
   });
  )
}

要消耗它：

this.helperService.getTeamMembersWithAccess('AdminPage').subscribe(data => {
  console.log(data);
});