rxjs: как улучшить этот случай с помощью операторов rxjs в стиле функционального реактивного программирования?

Question

В моем случае у меня есть следующая функция:

  private transformResData(data: Data[]): DataInfo[] {
    let userIDNames: Array<OBJIDName>;
    this.dataStoreService.userIDNames$.subscribe((res) => {
      userIDNames = res;   
    })
    return data.map((each) => {
      return {
        id: each.id,
        userName: userIDNames.find(current => current.userId === each.referID).userName
      };
    })       
  }

Проще говоря, эта функция хочет отобразить входные данные в новую форму, а выходные данные содержат свойство userName, а входные данные имеют только свойство referId.Мне нужно сопоставить referId с userName.Просто да?

И, как вы можете видеть, отношение отображения получается rxjs как наблюдаемая:

this.dataStoreService.userIDNames$ // Observable<Array<UserIDName>> of the id and name mapping

Мое текущее решение может работать на subscribe для наблюдаемойи получить данные.

Но я хочу знать, как сделать это более функциональным способом реактивного программирования.Мое воображение использует операторы rxjs, такие как:

this.dataStoreService.userIDNames$.pipe(...)

Функция все еще должна возвращать данные простого массива вместо Observable.
Как это сделать?Спасибо

Answer 1

Вам нужно вернуть Observable или Promise, я удалил локальные переменные и передал переменную по цепочке функций.

private transformResData(data: Data[]): Observable<DataInfo[]> {
   return this.dataStoreService.userIDNames$.pipe(map(userIDNames => {
       return data.map((each) => ({
           id: each.id,
           userName: userIDNames.find(current => current.userId === each.referID).userName
         })
       })       
    }))
}