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订阅内部记录时将其打印出来。如何通过在转换函数中返回一个observable而不是一个字符串来重新运行它？我知道我必须使用AsyncPipe，但我不确定如何解决这个问题。

Answer 1

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

这是一个嵌套的Json对象，html标签无法理解json管道等同于 stringfy Json pipe

Answer 2

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

如何从管道加载JSON？

2 个答案: