さまざまな通貨タイプのドロップダウンがあります。ページ全体で、選択した通貨タイプのレートにすべての通貨レートを表示したいと思います。調査の結果、角度のあるカスタムパイプを作成することでこれを解決できることがわかりました。これはどのように行うことができますか？
私はすでにカスタムパイプを作成しましたが、変換機能の下で、選択した通貨タイプを秘密にする方法を説明します。
<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>
通貨は選択した通貨タイプに変換し、それぞれのレートをページ全体に変更する必要があります。
ドロップダウンで選択されたときに通貨を変更する場合は、変数を作成して、その通貨で適用します。
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加