Question

我有一个选择字段，由ngOnChanges上的ngModel填充。

<label for="selectNumerator">Numerator:</label>
    <select class="form-control select" [ngModel]="numeratorSelect" (ngModelChange)="onNumeratorChange($event)" name="selectNumerator">
        <option *ngFor="let x of numeratorSelect" value="{{x.optionId}}">{{x.name}}</option>
    </select>

但是，在页面加载并添加数据后，默认情况下，选择字段为空。下面的数据将被添加到选择

[{"name":"dataname","optionId":1,"factor":4,"description":null}]

如何设置它以使选择框显示列表中的第一个选项？

如有必要，很高兴提供更多信息。

Answer 1

使用

[ngModel]="numeratorSelect"

和

<option *ngFor="let x of numeratorSelect"

没有意义。

[ngModel]="..."

需要引用与

之一匹配的值

value="{{x.optionId}}"

像

[ngModel]="selectedNumerator"

selectedNumerator = 1;

Answer 2

您需要一个包含当前所选值的单独变量：

export class ComponentA {
    numeratorSelect: Array<any> = [
        { 
            name: "dataname", 
            optionId: 1, 
            factor: 4, 
            description: null
        }
    ];
    selectedOption: number = numeratorSelect[0].optionId;

在您的模板中，在ngModel：

中绑定它

<label for="selectNumerator">Numerator:</label>
<select class="form-control select" [ngModel]="selectedOption" (ngModelChange)="onNumeratorChange($event)" name="selectNumerator">
    <option *ngFor="let x of numeratorSelect" value="{{x.optionId}}">{{x.name}}</option>
</select>

angular2 select不会选择填充的vale作为默认值

2 个答案: