Tengo un menú desplegable con varios tipos de moneda. Quiero mostrar todas las tasas de moneda en las tasas de tipo de moneda seleccionadas en toda la página. Después de una investigación, descubrí que esto se puede resolver creando una tubería personalizada en angular. ¿Cómo se puede hacer esto?

Ya creé una tubería personalizada pero en función de transformar cómo puedo convertir el tipo de moneda seleccionado.

<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>

La moneda debe convertirse al tipo de moneda seleccionado y la tasa respectiva debe cambiarse a toda la página.

1
divya dave 16 oct. 2019 a las 13:43

1 respuesta

La mejor respuesta

Si desea cambiar la moneda cuando está seleccionada en el menú desplegable, cree una variable y aplíquela en su moneda:

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>

Un ejemplo en el stackblitz.

0
StepUp 16 oct. 2019 a las 11:41