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

客队(显示不正确)

<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

您已将绑定(bind)到某个表达式的 selected 属性放入通过 ngFor 指令填充的每个选项。最后选择的选项被选中，因为您只能从选择框中选择一个选项。

如果您绑定(bind) value 属性，那么如果该值与 ngModel 表达式的值匹配，则会选择该属性。