Question

我有一个下拉菜单，您可以根据所选货币选择货币，但现在我使用ngif来显示货币，但只有两种货币它可以正常工作但是对于更多的货币，我必须添加更多的ngif和我不合逻辑，因为该页面的HTML代码将是巨大的（100种不同的货币= 100 ngif＆＃39; s）

这就是我现在所拥有的：

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

我知道我可以使用ngSwitch，但这仍然是很多代码。

Answer 1

完全使用单独的属性。例如selectedCurrency。然后，当从下拉列表中选择新选项时，将其分配给selectedCurrency

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

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

角度4 ngIf替代品

1 个答案: