Angular2自動選擇下拉選項，如果條件

Question

我有一個模板，其中服務填充選擇框中使用的值。像這樣：

<div class="form-group"> 
    <label for="backings_select">Backing</label> 
    <select class="form-control" 
      required 
      name="backings_select" 
      (ngModelChange)="storeValueRedux($event, count)"> 
    <option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option> 
    </select> 
</div> 

上述工作正常。所以我想，如果陣列背襯只有一個項目，我還不如角自動選擇一個值可用（UI改進）

所以對概念，我嘗試了一個基本的，哈克證明：現在

<div *ngIf="backings?.length == 1" class="form-group"> 
    <label for="backings_select">Backing Single</label> 
    <select class="form-control" 
      required 
      name="backings_select" 
      (ngModelChange)="storeValueRedux($event, count)"> 


    <option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option> 
    </select> 
</div> 

<div *ngIf="backings?.length > 1" class="form-group"> 
    <label for="backings_select">Backing Multiple</label> 
    <select class="form-control" 
      required 
      name="backings_select" 
      (ngModelChange)="storeValueRedux($event, count)"> 
    <option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option> 
    </select> 
</div> 

如果backings.length == 1，下面的HTML渲染：

<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option> 

如果backings.length> 1以下HTML呈現：

<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option> 
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option> 

現在從理論上講，上述代碼應工作，然而，當長度== 1的HTML選擇框是不能自動與選定=「選擇了」選擇的值。我錯過了什麼，或者有什麼理由不選擇自動選擇？

Answer 1

使用[selected]代替selected

<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option> 

不使用ngIf和複製你的代碼就可以實現這樣理想的結果：

<div class="form-group"> 
    <label for="backings_select">Backing</label> 
    <select class="form-control" 
      required 
      name="backings_select" 
      (ngModelChange)="storeValueRedux($event, count)"> 
     <option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option> 
{{backing.name}}</option> 
    </select> 
</div>