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>

上述工作正常。因此，我认为，如果数组背面只有一个项目，我也可以让Angular Auto选择可用的一个值（用于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>

和if 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选择框未自动选择以选择=" 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>