Angular 2仅选择最后一个选项作为预先选择的FormGroup

我正在使用Angular 2 FormGroups来管理我的用户输入。如果我想更新旧数据中的选择字段，则选择字段不会按预期填充。只有在列表中最后一项应该被选中的情况下，它们才能工作。然后窗体适当地显示来自FormGroup的项目。Angular 2仅选择最后一个选项作为预先选择的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>

来源

2017-02-14 user3331142

我可以看到只有一个选择的代码 –

@RomanC我已更新的问题包括 – user3331142

'[value]'和'[ngValue]'不与'[selected]'一起使用，您需要使用'[ngModel] =“xxx”'并将项目预选项目分配给'xxx'。 –

你已经把selected属性绑定到其他表达通过ngFor指令填充每个选项队（显示错误）。由于您只能从选择框中选择一个选项，因此选择了上次选择的选项。

如果绑定了value属性，那么将在数值匹配ngModel表达式的值时选择它。

来源

2017-02-15 09:31:33

嘿，我诉诸这种方法，因为价值/ ngModel配对也没有奏效，但我会再次检查出来。 – user3331142

Angular 2仅选择最后一个选项作为预先选择的FormGroup

回答

相关问题