Angular раскрывающийся список не показывает по умолчанию при загрузке

Question

У меня действительно странная проблема с Angular формами.
Так что в основном у меня есть форма, которая включает в себя пользовательский выбор с 3 вариантами.
<div class="form-group"> <label class="form-label" for="custom-select">Type of Map:</label> <select class="custom-select" ngModel #mapType="ngModel" name="mapType" required> <option *ngFor="let m of mapTypes" value="{{m.value}}">{{m.name}}</option> </select> </div>

Теперь, теоретически это должно загрузить данные из этого массива:

mapTypes = [{value:1, name:'Draw All'}, {value:2, name: 'Draw Movements (Display Most Recent)'}, {value:3, name: 'Draw Movements (Display All)'}];

И это успешно происходит. Единственная проблема при загрузке страницы выглядит следующим образом:

Но, когда я нажимаю на нее, я получаю все параметры (и значения успешно проходят когда форма отправлена)

Итак, мой вопрос: почему это происходит и как я могу это исправить? Параметры загружаются правильно, и первый вариант выбран по умолчанию (это то, что я хочу). Тем не менее, он не будет отображаться в поле при загрузке страницы. Это странно, потому что у меня есть еще один выпадающий список, который работает примерно так (на самом деле более обширно) и работает отлично.

Answer 1

Я бы предложил связать ngModel с локальной переменной и инициализировать ее желаемым значением.

[(ngModel)]="selected"

Например:

HTML :

<div class="form-group">
   <label class="form-label" for="custom-select">Type of Map:</label>
       <select class="custom-select" [(ngModel)]="selected" name="mapType" required >
           <option *ngFor="let m of mapTypes" value="{{m.value}}" >{{m.name}}</option>
       </select>
 </div>

Компонент:

  mapTypes = [{value:1, name:'Draw All', selected: true}, {value:2, name: 'Draw Movements (Display Most Recent)'}, {value:3, name: 'Draw Movements (Display All)'}];

  selected = this.mapTypes[0].value;

Работает Stackblitz

Примечание: В целом это хорошая идея / проще использовать материал компоненты с Angular или попробуйте ngx- bootstrap, если предпочитаете bootstrap.

Answer 2

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