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中选择货币时更改货币，则创建一个变量并将其应用到您的货币中

TypeScript：

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>

An example at the stackblitz.

如何使用管道将货币汇率转换为所选货币类型？

1 个答案: