2017-11-30 9 views
1

私はJSONファイルをロードし、カスタムパイプにそのサービスを使っているサービスがあります。パイプから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を使用しなければならないことを知っていますが、これについてどうやって行くのかは分かりません。

答えて

2

は、HTMLタグはJSONパイプを理解できない、ネストされたJSONオブジェクトはstringfyJson pipe

と等価である <p>{{'test' | langAsset | async | json}}</p>

を使用してみてください

0

私は100%確信していませんが、あなたのパイプがObservableラッピングとObservableを返すかもしれないと思います。非同期パイプを使用して2回パイピングしてみてください。あるいは、Observableの代わりにどのようなObservableの変換関数が返すのかをTypescriptに明示して、それが真でない場合に叫ぶでしょう。 ObservableのObservableの場合は、flatMapを使用する必要があります。

関連する問題