2017-12-07 3 views
0

통화를 선택할 수있는 통화 드롭 다운 메뉴가 있습니다. 그러나 지금은 ngif을 사용하여 통화를 표시하고 있지만 두 통화만으로는 잘 작동합니다.angular 4 ngI 대안

회사 : 더 통화가 좀 더 ngif을 추가해야 나에게 그 해당 페이지의 HTML 코드 (100 개 서로 다른 통화 = 100 ngif 년대) 거대한 될 것입니다 때문에하지 논리의

이 내가 지금 무엇을 가지고 .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> 

, 나는 단지 하나 개의 코드 블록이

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

또한

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

같은 뭔가를 어떤 방법이 무엇을 달성하고자이됩니다
<td>{{company.currency.<changes base on drop-down selection>}}</td> 

I kn 아쉽게도 ngSwitch를 사용할 수 있지만 여전히 많은 코드가 될 것입니다.

답변

1

별도의 속성을 모두 사용하십시오. 예 : selectedCurrency. 새로운 옵션의 메뉴에서 선택 될 때 그런 selectedCurrency

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

<td>{{selectedCurrency}}</td> 
+0

'company.currency.mxn'나는 전, API를에서 받고 있어요 속도가에 할당합니다. company.currency.mxn = 19.12. company.currency.php = 24.55. 그래서 드롭 다운 메뉴에서 MXN을 선택할 때 mxn 값을보고 싶습니다. 그 반대의 경우 – Milad

+0

@Milad 로직은 여전히 ​​동일해야합니다. 사용자는 드롭 다운에서'mxn'을 선택합니다 -> API를 호출하여 값을 얻습니다. - 디스플레이에 대해'selectedCurrency'에 값을 할당합니다. 내가 약 100 개의 다른 회사를 가지고 있다면 – LLai

+0

이 로직이 작동합니까? 그래서 모든 회사가 행에 나열되어 있으며 각 통화마다 환율이 다르기 때문에 드롭 메뉴에서 mxn을 선택하여 API에서 얻는 모든 통화 환율을 mxn, 비자로 표시하고 다른 통화는 비자로 표시하고 싶습니다. 율. – Milad