如何从管道加载 JSON？答案

【问题标题】：How to load JSON from a pipe?如何从管道加载 JSON？
【发布时间】：2018-05-13 22:10:01
【问题描述】：

我有一个服务正在加载 JSON 文件并在自定义管道中使用该服务：

import { Pipe, PipeTransform } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { LanguageLoadService } from '../../services/language-load/language-load.service';

@Pipe({name: 'langAsset'})
export class LangAsset implements PipeTransform {

  constructor(private languageService: LanguageLoadService) {

  }

  transform(textKey: string): Observable<any> {
    return new Observable(observer => {
      this.languageService.loadLanguage("en-US").subscribe((langData) => {
        observer.next(langData[textKey] ? langData[textKey] : 'Error');
      })
    });
  }
}

在模板上：

<p>{{'test' | langAsset | async }}</p>

但似乎转换在服务完成加载 JSON 之前运行，因为页面上的结果是 [object Object]，并且当它从 loadLanguage 订阅内部登录时，console.log 会很好地打印出来。如何通过在转换函数中返回一个可观察对象而不是字符串来重新运行它？我知道我必须使用AsyncPipe，但我不确定该怎么做。

【问题讨论】：

标签： angular http angular2-pipe

【解决方案1】：

我不是 100% 确定，但我认为你的管道可能会返回一个 Observable 包装和 Observable。尝试通过异步管道输入两次。或者明确告诉 Typescript 你的转换函数返回什么类型的 Observable 而不是 Observable，这样如果不是这样，它就会对你大喊大叫。如果它是 Observable 的 Observable，你应该使用 flatMap。

【讨论】：

【解决方案2】：

尝试使用<p>{{'test' | langAsset | async | json}}</p>

是嵌套的Json对象，html标签无法理解json管道相当于stringfyJson pipe

【讨论】：