如何在 Angular 2 中获取 select 的新值（2025 年）：最佳实践

如何从 Angular 2+ 的 select 中获取新值：从新手到专家

您是否曾在晚上喝着咖啡编写 Angular 代码时突然意识到：“该死，我该如何捕捉用户选择 <select> 中新选项的时刻？”？如果是这样，您并不孤单。在 Stack Overflow 上，“如何在 Angular 2 的‘select’中获取新选择？”这个问题已经获得了数万次浏览。这并不奇怪：在 Angular 中，有整整三种方法可以做到这一点，而新手常常会困惑该选择哪一种。

在本文中，我们将介绍所有适用于 2025 年 Angular 2+ 的 TypeScript 方法。您将学习如何使用 ngModel、响应式表单和 (change) 事件处理程序，并获得何时使用哪种方法的明确建议。我们开始吧！

问题：为什么 Angular 中的简单 select 不仅仅是 HTML？

在普通的 HTML 中，您会这样写：

<select id="city" onchange="handleChange(event)">\n  <option value="msk">莫斯科</option>\n  <option value="spb">圣彼得堡</option>\n</select>

而 handleChange(event) 函数会接收到事件。在 Angular 中，情况稍微复杂一些（但也更灵活）。您不仅需要“捕获点击”，还需要正确绑定数据、处理更改，并避免常见的错误，例如失去响应性或不必要的重新渲染。

让我们来看看您在 2025 年将使用的三种主要方法。

方法 1：经典方法（ngModel + (change)）——简单可靠

这种方法适用于简单的表单，您不需要复杂的验证。您通过 [(ngModel)] 将 select 绑定到一个变量，并监听 (change) 事件。

代码示例

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  selectedCity: string = '';\n  cities: string[] = ['莫斯科', '圣彼得堡', '喀山'];\n\n  onCityChange(newCity: string): void {\n    console.log('已选择城市:', newCity);\n    // 这里可以调用 API 或更改 UI 的其他部分\n  }\n}

<!-- app.component.html -->\n<select [(ngModel)]="selectedCity" (change)="onCityChange(selectedCity)">\n  <option value="" disabled>请选择城市</option>\n  <option *ngFor="let city of cities" [value]="city">{{ city }}</option>\n</select>

重要！ 在 Angular 2+ 中，(change) 事件在模型更新之后触发。因此，onCityChange 内部的 selectedCity 已经包含了新值。如果您需要旧值，请在更改之前将其保存到单独的变量中。

方法 2：响应式表单——强大且可控

如果您正在构建一个需要验证、动态字段或订阅的严肃应用程序，请使用响应式表单。这是 2025 年的行业标准。

步骤 1：导入 ReactiveFormsModule

// app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule\n  ]\n})\nexport class AppModule { }

步骤 2：创建 FormControl 并订阅更改

// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent implements OnInit {\n  cityControl = new FormControl('');\n  cities: string[] = ['莫斯科', '圣彼得堡', '喀山'];\n\n  ngOnInit(): void {\n    // 订阅值的变化\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('来自响应式表单的新城市：');