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

【问题标题】：Return Observable from ngrx store pipe selector从 ngrx 存储管道选择器返回 Observable
【发布时间】：2021-01-22 22:51:00
【问题描述】：

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

我的问题是服务方法返回 undefined 因为 let flagAvatars: string[]; 在订阅商店选择器返回之前，因为它正在等待 loadUsers( ) 来完成。我知道我需要更改 getTeamMembersWithAccess() 方法以以某种方式返回 Observable，但我不确定如何编写。我尝试了多种方法，但无法做到正确。很确定我需要使用地图而不是订阅，但就是不知道怎么写。

【问题讨论】：

标签： angular ngrx-store rxjs-observables

【解决方案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);
});

【讨论】：