使用 Observable 或 Promise 在 Angular 6 中转换管道 [英] Transform pipe in Angular 6 with Observable or Promise

问题描述

我尝试在 angular 6 中设置 Pipe，使用服务(返回 observable 的方法)将文本转换为其他文本

I trying to set Pipe in angular 6 that convert text to other with using service (the method that returns observable)

我尝试了以下代码，但我需要返回一个字符串而不是 Promise

I tried the following code, but I need to return a string instead of 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等同步返回的同步函数?

There is any way to make the asynchronous method of Promise / Ovservabe to a synchronous function that returns synchronous such as String?

非常感谢帮助.

推荐答案

尝试改为返回 Observable 并将 async 链接到现有管道上.此外，您将无法以 API 调用的异步性质返回 string.

Try instead returning an Observable<string> and chaining the async onto your existing pipe. Also you simply will not be able to return string with the async nature of your API calls.

管道:

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.io/guide/pipes#custom-pipes" rel="noreferrer">指数管道 Angular 文档中的示例.

Here is a example async pipe in action derived from the exponential pipe example in the Angular documentation.

如果您真的由于某种原因需要使用 promises 而不是 observables:

If you really need to use promises instead of observables for some reason:

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;
      })
  }
}

希望有帮助！

这篇关于使用 Observable 或 Promise 在 Angular 6 中转换管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！