Angular 2 select only last option 作为预选的 FormGroup答案

【问题标题】：Angular 2 select only last option works as pre-selected FormGroupAngular 2 select only last option 作为预选的 FormGroup
【发布时间】：2017-02-14 22:44:51
【问题描述】：

我正在使用 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>

【问题讨论】：

我只能看到一个选择的代码
@RomanC 我已更新问题以包含两者
[value] 和[ngValue] 不能与[selected] 一起使用，您需要使用[ngModel]="xxx" 并将项目预选项目分配给xxx。

标签： angular select angular2-forms

【解决方案1】：

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

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

【讨论】：

知道了，我采用了这种方法，因为 value/ngModel 配对也不起作用，但我会再检查一次。