Question

我试图将Pipe设置为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之类的同步函数的同步函数？

非常感谢助手。

Answer 1

请尝试返回一个Observable<string>并将async链接到您现有的管道上。同样，您将无法使用API调用的异步性质返回string。

管道：

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文档中的example示例派生的exponential pipe异步管道。

如果您出于某些原因确实需要使用promise而不是observables，

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

希望有帮助！

在Angular 6中以可观察或可承诺方式转换管道

1 个答案: