Угловой 2 выберите только последний вариант, как предварительно выбранный FormGroup

Question

Я использую Angular 2 FormGroups для управления вводом моего пользователя. Если я хочу обновить поля выбора из старых данных, поля выбора не заполняются так, как ожидалось. Они работают только в том случае, если выбран последний элемент в списке. Затем форма показывает этот элемент из FormGroup соответствующим образом.

Вот код для выбора

<select formControlName="homeTeam"> 
     <option>-- Choose a team --</option>         
     <option 
      *ngFor="let homeTeam of _teamsService.teamsForSchedule" 
      [ngValue]="homeTeam" 
      [selected]="homeTeam.$key===gameForm.value['homeTeam'].$key"> 
        {{homeTeam.name}} 
     </option> 
</select> 
<label>Away Team</label> 
<select formControlName="awayTeam"> 
     <option >-- Choose a team --</option>     
     <option 
      *ngFor="let awayTeam of _teamsService.teamsForSchedule" 
      [ngValue]="awayTeam" 
      [selected]="awayTeam.$key===gameForm.value['awayTeam'].$key"> 
        {{awayTeam.name}} 
     </option> 
</select> 

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

Вот скриншот того, что я вижу

Вот HTML я вижу, когда я инспектировать. Как вы можете видеть, выбранный появляется на втором теге параметра, но по какой-то причине он не отображается.

Главной Команда (отображая правильно)

<select formcontrolname="homeTeam" ng-reflect-name="homeTeam" class="ng-untouched ng-pristine ng-valid"> 
       <option>-- Choose a team --</option>         
       <!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object]" 
}--><option value="1: Object" ng-reflect-ng-value="[object Object]"> 
        Limozeen 
       </option><option value="2: Object" ng-reflect-ng-value="[object Object]"> 
        Smash Bros 
       </option><option value="3: Object" ng-reflect-ng-value="[object Object]" ng-reflect-selected="true"> 
        Thunder Thighs 
       </option> 
</select> 

Away Team (отображающий неправильно)

<select formcontrolname="awayTeam" ng-reflect-name="awayTeam" class="ng-pristine ng-valid ng-touched"> 
        <option>-- Choose a team --</option>     
        <!--template bindings={ 
     "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object]" 
    }--><option value="1: Object" ng-reflect-ng-value="[object Object]"> 
         Limozeen 
        </option><option value="2: Object" ng-reflect-ng-value="[object Object]" ng-reflect-selected="true"> 
         Smash Bros 
        </option><option value="3: Object" ng-reflect-ng-value="[object Object]"> 
         Thunder Thighs 
        </option> 
</select> 

Answer 1

Вы поставили selected свойство, связанное с каким-тем выражением для каждой опции населенной через ngFor директивы , Выбран последний выбранный параметр, потому что вы можете выбрать только один вариант из окна выбора.

Если вы связываете свойство value, то оно будет выбрано, если значение соответствует значению выражения ngModel.