根据 <select> 中的用户选择在 Angular2 中显示输入

Question

我在 a 中有一个元素，其中包含 2 个项目 - 新的、二手的

这之后是单独的 2 个元素，根据选择的是“新建”还是“二手”，应将其隐藏。

请看下面我的代码并指出我哪里出错了？

div 包含里程数应在用户选择“新建”时显示，但在选择 'Used' 时也会显示 - 请参阅附件。

<select class="form-control" [ngModel]="SelectedCarType" 
name="SelectedCarType" id="SelectedCarType">
<option *ngFor="let c of CarTypes" [value]="c.CarTypeId">
   {{c.CarDescription}}</option>
</select>

<div *ngIf="SelectedCarType ===1" class="form-group" style="width:50%">
   <label class="label label-info" for="Mileage">Mileage:</label>
   <input class="form-control" type="text" name="Mileage" id="Mileage"/>
 </div>

<div class="form-group" style="width:50%">
    <label class="label label-info" for="Kilometres">Kilometres:</label>
    <input class="form-control" type="text" name="Kilometres" 
 id="Kilometres" />
</div>

任何帮助将不胜感激。

Answer 1

<select class="form-control" [ngModel]="SelectedCarType" 
name="SelectedCarType" id="SelectedCarType">
<option *ngFor="let c of CarTypes" [value]="c.CarTypeId">
   {{c.CarDescription}}</option>
</select>

<div *ngIf="SelectedCarType ===1" class="form-group" style="width:50%">
   <label class="label label-info" for="Mileage">Mileage:</label>
   <input class="form-control" type="text" name="Mileage" id="Mileage"/>
 </div>

<div *ngIf="SelectedCarType != 1"  class="form-group" style="width:50%">
    <label class="label label-info" for="Kilometres">Kilometres:</label>
    <input class="form-control" type="text" name="Kilometres" 
 id="Kilometres" />
</div>

Answer 2

尝试像这样使用双向数据绑定[(ngModel)]

<select class="form-control" [(ngModel)]="SelectedCarType" >
<option *ngFor="let c of CarTypes" [value]="c.CarTypeId">
   {{c.CarDescription}}</option>
</select>

<div *ngIf="SelectedCarType === 1" class="form-group" style="width:50%">
   <label class="label label-info" for="Mileage">Mileage:</label>
   <input class="form-control" type="text" name="Mileage" id="Mileage"/>
 </div>

<div class="form-group" style="width:50%">
    <label class="label label-info" for="Kilometres">Kilometres:</label>
    <input class="form-control" type="text" name="Kilometres" 
 id="Kilometres" />
</div>

根据 <select> 中的用户选择在 Angular2 中显示输入

displaying input in Angular2 based on user selection in <select>

angular2-template

angular