Angular 5默认选择选项未设置

Question

我有一个包含输入字段和一些选择下拉菜单的表单。正在从输入对象正确填充所有输入字段，但未将下拉列表选择为正确的值，并且始终首先使用空白选项。

这就是模板的样子：

<div class="form-group">
    <label for="state">State:</label>
    <select class="form-control formField"  id="state" required [(ngModel)]="user.state" name="state">
        <option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
    </select>
</div>

我无法弄清楚我错过了什么。

user.state是一个包含2个字母的州名缩写的字符串。 州是一系列使用2个字母缩写的美国州。

Answer 1

我发现的最好方法如下：

<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField"  id="state" required [(ngModel)]="user.state" name="state">
    <option [ngValue]="undefined" disabled selected>Select a State</option>
    <option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>

disabled属性不允许从下拉列表中选择该选项。希望这会有所帮助。