Angular 5：select元素的ngModel绑定无法更新问题

我来帮你排查这个问题，你遇到的select视图不更新的情况，大概率是几个常见的Angular绑定细节问题导致的，咱们一步步来解决：

1. 修正双向绑定的语法错误 #

你写的([ngModel])顺序搞反了！Angular的双向绑定语法是[(ngModel)]（俗称“香蕉在盒子里”），括号和方括号的顺序绝对不能错，这个错误会直接导致绑定失效，视图根本不会响应selectedValue的变化。

2. 移除无效的select属性 #

<select>元素没有type="submit"这个属性，这是多余的无效代码，甚至可能干扰Angular的正常渲染，直接删掉就好。

3. 确保option的value绑定准确 #

虽然用插值{{ object.value }}能显示选项文本，但最好显式用[value]绑定option的value值，这样Angular能更准确地匹配选中值和选项，避免因类型不匹配导致的选中失败。

4. 检查数据加载的时机 #

如果你的objects是通过异步请求（比如HTTP接口）获取的，那在ngOnInit里直接设置selectedValue的时候，objects可能还没加载完成——此时option还没渲染出来，自然没法选中目标值。这种情况下，要等数据加载完成后再设置选中值，比如放在请求的subscribe回调里。

5. 确认FormsModule已导入 #

使用ngModel必须在对应的模块中导入FormsModule，否则绑定完全不会生效，这是很容易忽略的基础配置！

修正后的完整代码示例 #

模板代码

<select [(ngModel)]="selectedValue" #item (change)="onSelectItem(item.value)">
  <option>Pick an option</option>
  <option *ngFor="let object of objects" [value]="object.value">
    {{ object.value }}
  </option>
</select>

组件代码（异步数据场景）

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  selectedValue: string;
  objects: any[] = [];

  constructor(private dataService: YourDataService) { }

  ngOnInit() {
    // 等待异步数据加载完成后再设置选中值
    this.dataService.getYourObjects().subscribe((response) => {
      this.objects = response;
      this.selectedValue = 'something'; // 确保这个值存在于objects的value集合中
    });
  }

  onSelectItem(value: string) {
    console.log('Selected value:', value);
  }
}

模块配置（必加）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { YourComponent } from './your-component.component';

@NgModule({
  declarations: [YourComponent],
  imports: [BrowserModule, FormsModule], // 添加到imports数组
  bootstrap: [YourComponent]
})
export class YourModule { }

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