Question

我有一个元素，其中包含2个项目 - 新的，使用接下来是一个单独的2个元素，应该隐藏这些元素，具体取决于是选择了New还是Used。请参阅下面的代码并告知我哪里出错了？当用户选择“新”时，应显示包含里程的div，但在选择＆＃39;使用＆＃39;时也会显示 - 请参阅附件。＆lt; select class =＆＃34; form-control＆＃34; [ngModel] =＆＃34; SelectedCarType＆＃34; 命名=＆＃34; SelectedCarType＆＃34; ID =＆＃34; SelectedCarType＆＃34;＆GT; ＆lt; option * ngFor =＆＃34;让CarTypes＆＃34; [值] =＆＃34; c.CarTypeId＆＃34;＆GT; {{c.CarDescription}}＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆lt; div * ngIf =＆＃34; SelectedCarType === 1＆＃34;类=＆＃34;形式的基团＆＃34;风格=＆＃34;宽度：50％＆＃34;＆GT; ＆lt; label class =＆＃34; label label-info＆＃34;用于=＆＃34;里程＆＃34;＆GT;里程：其中/标签＆gt; ＆lt;输入类=＆＃34;表格控制＆＃34;类型=＆＃34;文本＆＃34;命名=＆＃34;里程＆＃34; ID =＆＃34;里程＆＃34; /＆GT; ＆LT; / DIV＆GT; ＆lt; div class =＆＃34; form-group＆＃34;风格=＆＃34;宽度：50％＆＃34;＆GT; ＆lt; label class =＆＃34; label label-info＆＃34;用于=＆＃34;公里＆＃34;＆GT;里程数：其中/标签＆gt; ＆lt;输入类=＆＃34;表格控制＆＃34;类型=＆＃34;文本＆＃34;名称=＆＃34;公里＆＃34; ID =＆＃34;公里＆＃34; /＆GT; ＆LT; / DIV＆GT; 任何帮助将受到高度赞赏。

Answer 1

尝试使用双向数据绑定，如[（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>

Answer 2

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

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

2 个答案: