如何使用管道将货币汇率转换为选定的货币类型?

Question

我有一个包含各种货币类型的下拉列表。我想在整个页面上将所有货币汇率显示为选定的货币类型汇率。 经过研究，我发现这可以通过创建角度的自定义管道来解决。如何做到这一点？

我已经创建了自定义管道，但在转换功能下，我如何隐蔽选定的货币类型。

<form>
<div class="form-group pt-2 display-inline">
<select class="form-control w-200 display-inline" [(ngModel)]="dataService.selectedCurrency" (change)="currencySelected($event)">
<option disabled>Select Currency</option>
<option *ngFor="let item of _dataList.Currency" value="{{item.key}}">
{{item.value}}
</option>
</select>
</div>
</form>

货币应转换为所选货币类型，相应的汇率应更改为全页。

Answer 1

如果要在 dropDown 中选择货币时更改货币，请创建一个变量并将其应用于您的货币：

打字稿：

selectedCurrency = 'USD';
printedOption: string;
options = [
{ name: "USD", value: 1, currencyRate: 25 },
{ name: "CAD", value: 2, currencyRate: 15 },
{ name: "CLP", value: 3, currencyRate: 35 }
]
convertWithCurrencyRate(value: number, currency: string){
let currencyRate = this.options.find(f=> f.name === currency).currencyRate;
if (currencyRate) {
return value * currencyRate;
}
return value;
}

.HTML：

<select 
class="form-control w-200 display-inline" 
[(ngModel)]="selectedCurrency" 
(change)="currencySelected($event)">
<option disabled>Select Currency</option>
<option *ngFor="let item of _dataList.Currency" value="{{item.key}}">
{{item.value}}
</option>
</select>
<div class="price">{{  convertWithCurrencyRate(555, selectedCurrency) 
| currency:selectedCurrency:true:'3.2-2'  }}</div>

堆栈闪电战的一个例子。