Return 可从 ngrx 存储管道选择器中观察到

Question

我有一个 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');
}

我的问题是服务方法 return 未定义，因为 let flagAvatars: string[]; 在订阅商店选择器之前 returns 因为它正在等待 loadUsers() 的调度完成。我知道我需要以某种方式将 getTeamMembersWithAccess() 方法更改为 return 一个 Observable，但我不知道怎么写。我已经尝试了多种方法，但无法正确处理。很确定我需要使用地图而不是订阅，但就是不知道怎么写。

Answer 1

您的说法完全正确，我会协助您具体化。

试试这个：

服务：

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);
});

Return 可从 ngrx 存储管道选择器中观察到

Return Observable from ngrx store pipe selector

angular

ngrx-store

rxjs-observables