angular 2+ 强制在下拉列表中选择第一项
angular 2+ force first item to be selected in a drop down
下面的代码正在做它应该做的事情:
<div class="form-group">
<label for="file_name" class="col-sm-4 control-label">File names:</label>
<select id="file_name" class="col-sm-8" [(ngModel)]="fileName" name="file_name" required>
<option value="run">use the run name</option>
<option value="other">custom- please specify a name below</option>
<option value="input">use the file input name</option>
</select>
</div>
<div class="form-group" *ngIf="fileName === 'other'">
<label for="custom_name" class="col-sm-4 control-label">File name:</label>
<input class="col-sm-8" type="text" id="custom_name" ngModel name="other_custom_name" required>
</div>
<div class="form-group" *ngIf="fileName === 'run'">
<label class="col-sm-4 control-label">Enter file name:</label>
<label class="col-sm-8" id="run_name">{{ this.runName }}</label>
</div>
<div class="form-group" *ngIf="fileName === 'input'">
<label class="col-sm-4 control-label">File name:</label>
<label class="col-sm-8" id="input_name">{{ this.inputDeckName }}</label>
</div>
如果我select第二个选项,显示输入:
但是当我启动应用程序时,没有项目是 selected:
我希望第一项自动 selected:
将相对选项设置为 selected 不起作用:
<option value="run" selected>use the run name</option>
你能帮忙吗?
谢谢。
在您的控制器中定义 属性 文件名并将其设置为您要选择的选项的值。在这种情况下,您应该执行以下操作:
public fileName: string = 'run';
selected 属性 在不使用 ngModel
时有效。使用 ngModel
时,必须将默认值分配给 ngModel
TS文件
fileName: string = 'run';
下面的代码正在做它应该做的事情:
<div class="form-group">
<label for="file_name" class="col-sm-4 control-label">File names:</label>
<select id="file_name" class="col-sm-8" [(ngModel)]="fileName" name="file_name" required>
<option value="run">use the run name</option>
<option value="other">custom- please specify a name below</option>
<option value="input">use the file input name</option>
</select>
</div>
<div class="form-group" *ngIf="fileName === 'other'">
<label for="custom_name" class="col-sm-4 control-label">File name:</label>
<input class="col-sm-8" type="text" id="custom_name" ngModel name="other_custom_name" required>
</div>
<div class="form-group" *ngIf="fileName === 'run'">
<label class="col-sm-4 control-label">Enter file name:</label>
<label class="col-sm-8" id="run_name">{{ this.runName }}</label>
</div>
<div class="form-group" *ngIf="fileName === 'input'">
<label class="col-sm-4 control-label">File name:</label>
<label class="col-sm-8" id="input_name">{{ this.inputDeckName }}</label>
</div>
如果我select第二个选项,显示输入:
但是当我启动应用程序时,没有项目是 selected:
我希望第一项自动 selected:
将相对选项设置为 selected 不起作用:
<option value="run" selected>use the run name</option>
你能帮忙吗?
谢谢。
在您的控制器中定义 属性 文件名并将其设置为您要选择的选项的值。在这种情况下,您应该执行以下操作:
public fileName: string = 'run';
selected 属性 在不使用 ngModel
时有效。使用 ngModel
时,必须将默认值分配给 ngModel
TS文件
fileName: string = 'run';