角2は最後に選択したもののみを選択したFormGroupとして機能します

Question

私はユーザー入力を管理するために角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だ私は

を見ているかのスクリーンショットです。ご覧のように、選択されたものは2番目のオプションタグに表示されますが、なんらかの理由で表示されません。

ホームチーム（正しく表示）アウェイ

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

あなたはngForディレクティブで埋め、すべてのオプションにいくつかの表現にバインドselectedプロパティを入れているチーム（間違って表示）

<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

。選択ボックスから選択できるオプションは1つだけなので、最後に選択したオプションが選択されています。

valueプロパティをバインドすると、値がngModelの式の値と一致する場合はそのプロパティが選択されます。