如何从管道加载 JSON？

Question

我有一个正在加载 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]，并且 console.log 在从在 loadLanguage 内订阅。我怎样才能通过在转换函数中返回一个可观察对象而不是一个字符串来让它重新运行？我知道我必须使用 AsyncPipe，但我不确定该怎么做。

Answer 1

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

Answer 2

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

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

如何从管道加载 JSON？

How to load JSON from a pipe?

http

angular2-pipe

angular