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

回答

相關問題