Question

我使用Angular 2 FormGroup来管理我的用户输入。如果我希望更新旧数据中的选择字段，则选择字段不会按预期填充。它们仅在选择列表中的最后一项时才起作用。然后表单适当地显示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

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

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

Angular 2 select only last选项作为预先选择的FormGroup

1 个答案: