eckig 4 ​​ngIf Alternative

Question

Ich habe ein Dropdown-Menü, das Sie die Währung und auf der gewählten Währung wählen können, aber im Moment verwende ich ngif, um die Währung anzuzeigen, aber und es funktioniert gut mit nur zwei Währungen aber für mehr Währungen ich muß mehr ngif hinzufügen und mir, das ist nicht logisch, da der HTML-Code für die Seite groß sein wird (100 verschiedene Währungen = 100 ngif der)

das ist, was ich habe jetzt:

Unternehmen .ts

currencyItems: string[] = ['MXN', 'PHP']; 
    currency: string = this.currencyItems[0]; 

company.html

<div class="col-md-5" *ngIf = "currency = 'MXN'"> 
     <input type="number" name="mxn" id="mxn" [(ngModel)]="newCompany.currency.mxn" class="form-control"> 
</div> 


<div class="col-md-5" *ngIf = "currency = 'PHP'"> 
     <input type="number" name="php" id="php" [(ngModel)]="newCompany.currency.php" class="form-control"> 
</div> 

, was ich will, ist zu erreichen, ist es eine Möglichkeit, dass ich einen Block von Code nur etwas wie die

<td>{{company.currency.mxn}}</td> 

zu

<div class="col-md-5"> 
     <input type="number" [(ngModel)]="newCompany.currency.<changes base on drop-down selection>" class="form-control"> 
</div> 

und auch habe

<td>{{company.currency.<changes base on drop-down selection>}}</td> 

I kn Ich kann ngSwitch verwenden, aber das wird immer noch viel Code sein.

Answer 1

Verwenden Sie eine separate Eigenschaft insgesamt. Zum Beispiel selectedCurrency. Dann, wenn eine neue Option aus dem Drop-Down ausgewählt wird, weisen Sie ihn selectedCurrency

<div class="col-md-5"> 
    <input type="number" [(ngModel)]="selectedCurrency" class="form-control"> 
</div> 

<td>{{selectedCurrency}}</td>