Angular2自动选择下拉选项（如果有条件）

Question

I have an template, where a service populates the values used in a select box. Like so:

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

The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)

So for a basic, hacky proof of concept I tried:

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

Now if backings.length == 1 , the following html is rendered:

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

And if backings.length > 1 the following html is rendered:

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

Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?

Answer 1

use [selected] instead of selected

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

without using ngIf and duplicating your code you can achieve the desired result like this:

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