angular 2+ 强制在下拉列表中选择第一项

Question

下面的代码正在做它应该做的事情：

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

你能帮忙吗？

谢谢。

Answer 1

在您的控制器中定义属性文件名并将其设置为您要选择的选项的值。在这种情况下，您应该执行以下操作：

public fileName: string = 'run';

Answer 2

selected 属性在不使用 ngModel 时有效。使用 ngModel 时，必须将默认值分配给 ngModel

TS文件

fileName: string = 'run';

angular 2+ 强制在下拉列表中选择第一项

angular 2+ force first item to be selected in a drop down

angular

select

option