Преобразование трубы в Angular 6 с Observable или Promise - PullRequest
Новая
       6

Преобразование трубы в Angular 6 с Observable или Promise

0 голосов
/ 10 января 2019

Я пытаюсь установить Pipe в angular 6, который преобразует текст в другой с помощью сервиса (метод, который возвращает наблюдаемый)

Я попробовал следующий код, но мне нужно вернуть строку вместо Promise

Труба: 

import { Pipe, PipeTransform } from '@angular/core';
import { TimeZoneService, TimeZone } from '../services/Global/timezone.service';
//import { resolve } from 'dns';
import { reject } from 'q';
import { Observable } from 'rxjs';

@Pipe({
  name: 'utcToText'
})
export class UtcToTextPipe implements PipeTransform {

  private timezoneLst: TimeZone[] = [];

  constructor(private _timezoneSvc : TimeZoneService) {}

  async transform(timezone: any, args?: any){
    this.timezoneLst = await this._timezoneSvc.getTimeZonesLst().toPromise();
     return this.timezoneLst.find(x => x.utc.indexOf(timezone) > -1).text;

}
}

HTML: 

<span>{{subscription.time_zone |  utcToText}</span>

Есть ли способ сделать асинхронный метод Promise / Ovservabe синхронной функцией, которая возвращает синхронную функцию, такую ​​как String?

Большое спасибо за помощников.

1 Ответ

0 голосов
/ 10 января 2019

Попробуйте вместо этого вернуть Observable<string> и приковать async к существующей трубе. Также вы просто не сможете вернуть string с асинхронной природой ваших вызовов API.

Труба: 

import { Pipe, PipeTransform } from '@angular/core';
import { TimeZoneService, TimeZone } from '../services/Global/timezone.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Pipe({ name: 'utcToText'})
export class UtcToTextPipe implements PipeTransform {
  constructor(private _timezoneSvc : TimeZoneService) {}

  transform(timezone: string, args?: any): Observable<string> {
    // this assumes getTimeZonesLst() returns an Observable<TimeZone[]>
    return this._timezoneSvc.getTimeZonesLst().pipe(
      map((timeZones: TimeZone[]) => {
        return timeZones.find(x => x.utc.indexOf(timezone) > -1).text;
      })
    );
  }
}

Шаблон: 

<span>{{subscription.time_zone | utcToText | async}</span>

Вот пример асинхронного канала в действии, полученный из примера экспоненциального канала в документации Angular.

Если вам действительно нужно по какой-то причине использовать обещания вместо наблюдаемых: 

import { Pipe, PipeTransform } from '@angular/core';
import { TimeZoneService, TimeZone } from '../services/Global/timezone.service';
import { Observable } from 'rxjs';

@Pipe({ name: 'utcToText'})
export class UtcToTextPipe implements PipeTransform {
  constructor(private _timezoneSvc : TimeZoneService) {}

  transform(timezone: string, args?: any): Promise<string> {
    // this assumes getTimeZonesLst() returns an Observable<TimeZone[]>
    return this._timezoneSvc.getTimeZonesLst()
      .toPromise()
      .then((timeZones: TimeZone[]) => {
        return timeZones.find(x => x.utc.indexOf(timezone) > -1).text;
      })
  }
}

Надеюсь, это поможет!

...