угловой 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>

Если я выберу второй вариант, будет отображаться ввод:

Но когда я запускаю приложение, элемент не выбирается:

Я бы хотел, чтобы первый элемент был выбран автоматически:

Установка относительной опции для выбранного не работает:

<option value="run" selected>use the run name</option>

Вы можете помочь?

спасибо.

Answer 1

selected свойство работает, когда вы не используете только ngModel.При использовании ngModel этому значению должно быть присвоено значение по умолчанию ngModel

TS-файл

fileName: string = 'run';

Answer 2

В вашем контроллере определите свойство fileName и установите для него значение опции, которую вы хотите выбрать.В этом случае вы должны сделать следующее:

public fileName: string = 'run';