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>

現在從理論上講，上面的代碼應該可以工作，但是當length == 1時，html select框不會自動使用selected =“ selected”選擇值。 我錯過了什么嗎？或者為什么沒有自動選擇？

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>