Как загрузить 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] на странице, и console.log распечатывает его нормально, когда он регистрируется внутри подписки loadLanguage. Как я могу заставить это повториться, возвращая наблюдаемое вместо строки в функции преобразования? Я знаю, что должен использовать AsyncPipe, но не знаю, как это сделать.


person Slyke    schedule 30.11.2017    source источник


Ответы (2)


Попробуйте использовать <p>{{'test' | langAsset | async | json}}</p>

Это вложенный объект Json, который тег html не может понять. JSON-канал эквивалентен stringfy Json-конвейер

person Rahul Singh    schedule 30.11.2017

Я не уверен на 100%, но я думаю, что ваш канал может возвращать обертку Observable и Observable. Попробуйте подключиться дважды через асинхронный канал. Или явно сообщите Typescript, какой тип Observable возвращает ваша функция преобразования вместо Observable, чтобы он наорал на вас, если это неправда. Если это Observable of Observable, вы должны использовать flatMap.

person Brendan Whiting    schedule 30.11.2017