Question

我无法让我的下拉列表在加载时呈现默认选项

这是HTML

<select [(ngModel)]=state name="state" id="state" class="form-control">
    <option *ngFor="let state of states" [ngValue]="state">{{ state.name }}</option>
</select>

，组件看起来像这样：

state = { abbr: "AL", name: "Alabama"}
states = [
{ abbr: "AL", name: "Alabama"},
{ abbr: "AK", name: "Alaska"},
{ abbr: "AS", name: "American Samoa"}
...
]

Answer 1

首先，你的[（ngModel）]缺少双引号，它应该是[（ngModel）] =“state”

此外，您只需将组件中的状态值设置为您想要的默认值即可。如果您希望默认值为明尼苏达州，则可以这样做。

<select [(ngModel)]="state" name="state" id="state" class="form-control">
    <option *ngFor="let state of states" [ngValue]="state.abbr">{{ state.name }}
</option>
</select>

然后在你的组件中....

this.state = 'MN';

或者如果您不想关闭其中一个状态对象属性，那么您可以使用@KamalSingh提到的索引来关闭数组中的第一个对象。所以在你的组件中你会放......

this.state = this.states[0]

Answer 2

只需在state变量之后用state = this.states[0];替换states变量初始化。您正在创建单独的对象，在初始化states[0]时不等于state。表示states[0]和state都是您的代码段中的不同对象。

现在您的代码应该在您的组件（.ts）文件中看起来像：

states = [
    { abbr: "AL", name: "Alabama"},
    { abbr: "AK", name: "Alaska"},
    { abbr: "AS", name: "American Samoa"}
];
state = this.states[0];

希望这会有所帮助!!

Angular2 +默认选择选项

2 个答案: