如何将 Observable<Some> 转换为其他 Observable<Other>

问题描述

我想使用 Transloco 并从现有的 REST API 而不是从 i18n 文件中收集翻译。我通过休息服务调用替换了 TranslocoHttpLoader 中的行：

  getTranslation(lang: string): Observable<Translation> {
    // return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
    return this.translationService.fetchTranslations();
  }

其中 Translation 是 Transloco 类型：

export declare type Translation = HashMap;

export declare type HashMap<T = any> = {
    [key: string]: T;
};

翻译 REST API 正在返回：

{
  "languageKeys": [
    {
      "key": "hello","value": "hello transloco"
    },...
 ]
}

所以

export class TranslationRest {
  languageKeys: LanguageKeyRest[] = [];
}

export class LanguageKeyRest {
  constructor(public key: string,public value: string) {}
}

所以我需要将 Observable<TranslationRest> 转换为 Transloco 使用的 Observable<Translation>：

翻译服务

public fetchTranslations(): Observable<Translation> {
  const response: Observable<TranslationRest> = this.httpClient.post<TranslationRest>(this.url,this.body,{'headers': this.headers});
  return this.convert1(response);
}

这个最简单的（用于测试目的）convert1 方法按预期工作：

private convert1(response: Observable<TranslationRest>): Observable<Translation> {
  return of({hello: 'hello transloco'})
}

html：

{{'hello' | transloco}}

在浏览器中显示：hello transloco

但是如何实现真正的转换呢？我试图关注 How to pipe / map an Observable in Angular 但没有走运：

  private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.map(item =>{
        item.key: item.value
      }))
    )
  }

解决方法

您的转换不正确

private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.reduce((obj,item) => ({
        ...obj,[item.key]: item.value,}),{}))
    )
}