如何在Angular 5中为下拉列表设置选中值？

根据你提供的代码片段，要让下拉列表正确显示选中值，核心是确保[(ngModel)]绑定的值和选项的[ngValue]匹配（引用或值相等），下面分步骤给你梳理解决方案：

1. 确认绑定值的结构匹配 #

你的模板里，下拉选项的[ngValue]绑定的是s.state，也就是states数组中每个元素的state属性对象。这意味着[(ngModel)]绑定的trip.state必须满足：

• 和s.state结构完全一致（比如都包含id、name等属性）；
• 最好直接引用states数组中某一项的state属性——Angular对于对象类型是通过引用匹配的，新建一个属性值相同的对象，因为引用不同，不会被识别为同一个选项。

2. 避免异步加载的时序问题 #

你提到有loadStates方法，这个方法大概率是异步获取数据（比如从后端API请求）。如果在states数据还没加载完成时就给trip.state赋值，Angular找不到对应的选项，就不会选中任何值。

一定要在states加载完成后再设置trip.state，比如在订阅的回调里处理：

loadStates() {
  // 假设这是你获取states的异步请求
  this.yourDataService.getStates().subscribe((fetchedStates: State[]) => {
    this.states = fetchedStates;
    // 现在states已经加载完成，匹配并设置trip.state
    const matchedState = this.states.find(s => s.state.id === this.trip.state.id);
    if (matchedState) {
      // 直接使用states数组中的引用，确保匹配
      this.trip.state = matchedState.state;
    }
  });
}

3. 检查模板绑定的正确性 #

再核对一下你的模板代码，确保[ngValue]和[(ngModel)]的绑定没有写错：

<select class="selectpicker" [(ngModel)]="trip.state">
  <option *ngFor="let s of states" [ngValue]="s.state">{{s.state.name}}</option>
</select>

这里的[ngValue]是s.state，ngModel是trip.state，两者的绑定目标要对应，不能把[ngValue]写成s（整个数组元素），否则会匹配失败。

可选：改用基本类型绑定（更简单可靠） #

如果觉得对象引用匹配太麻烦，你可以改用基本类型（比如state的id）来绑定，这样只要值相等就能匹配，不需要考虑引用：

模板修改： #

<select class="selectpicker" [(ngModel)]="trip.stateId">
  <option *ngFor="let s of states" [ngValue]="s.state.id">{{s.state.name}}</option>
</select>

组件修改： #

在Trip类中添加stateId属性，然后在加载states后，直接给trip.stateId赋值对应的id即可：

// 假设trip已经有stateId属性
this.trip.stateId = 1; // 对应某个state的id

这种方式对于基本类型（数字、字符串）的绑定更直观，也不容易出现引用不匹配的问题。

内容的提问来源于stack exchange，提问作者user2304483