我正在创建一个将一种货币值转换为另一种货币值的管道。我正在进行 HTTP 调用以转换值。
@Pipe({
name: "currencyConverter"
})
export class CurrencyConverterPipe implements PipeTransform {
transform(value: number, currencyPair: string): number {
let sourceCurrency = currencyPair.split(":")[0];
let destinationCurrency = currencyPair.split(":")[1];
this.currencyConverterService.convert(sourceCurrency, destinationCurrency).subscribe(successData => {
return successData['fiatValue'] * value;
}, errorData => {
console.error(errorData);
})
}
}
在 HTML 中
<p> {{ value | currencyConverter:'BTC:USD'}}</p>
我在 UI 中看不到任何值。当我使我的管道 不纯
时,它可以工作,但它正在对服务器进行许多 HTTP 调用。有没有办法在管道中不使用 pure: false
最佳答案
这个管道不是纯粹的设计。
为了不引起多个请求,它应该返回相同的可观察对象,在输入更改之前不会执行其他请求,例如:
@Pipe({
name: "currencyConverter",
pure: false
})
export class CurrencyConverterPipe {
private sourceCurrency;
private destinationCurrency;
private valueSubject = new Subject();
private value$ = this.valueSubject.asObservable().distinctUntilChanged()
.switchMap(value => {
return this.currencyConverter
.convert(sourceCurrency, destinationCurrency))
.map((data) => data * value);
});
constructor(private currencyConverter: ...) {}
transform(value: number, currencyPair: string): number {
this.sourceCurrency = currencyPair.split(":")[0];
this.destinationCurrency = currencyPair.split(":")[1];
this.valueSubject.next(value);
return this.value$;
}
}
因为它应该只与 async
管道一起使用,所以将它们连接在一起并扩展 AsyncPipe
是有意义的:
@Pipe({
name: "currencyConverterAsync",
pure: false
})
export class CurrencyConverterPipe extends AsyncPipe {
private sourceCurrency;
private destinationCurrency;
private valueSubject = new Subject();
private value$ = this.valueSubject.asObservable().distinctUntilChanged()
.switchMap(value => {
return this.currencyConverter
.convert(sourceCurrency, destinationCurrency))
.map((data) => data * value);
});
constructor(cdRef: ChangeDetectorRef, private currencyConverter: ...) {
super(cdRef);
}
transform(value: number, currencyPair: string): number {
this.sourceCurrency = currencyPair.split(":")[0];
this.destinationCurrency = currencyPair.split(":")[1];
this.valueSubject.next(value);
return super.transform(this.value$);
}
}
关于javascript - 如何在 Angular 5 的纯管道中使用 HTTP 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48899293/