Angular如何获取下拉框选中值传给提交按钮触发的函数

你原有代码存在两个核心问题：

• value="t"是静态属性绑定，所有选项的value都会被硬编码为字符串t，而非遍历得到的选项内容，绑定动态值需要写成[value]="t"
• *ngFor声明的临时变量t仅在当前<option>标签的模板作用域内生效，按钮点击事件在作用域外，无法直接读取该变量

实现方式1：双向绑定（推荐，写法简洁） #

1. 前置配置 #

在你当前组件所属的Angular模块中导入FormsModule，用于支持双向绑定语法：

// 在对应module文件中添加
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 你原有的导入
    FormsModule
  ]
})

2. 修改HTML模板 #

给<select>标签添加[(ngModel)]双向绑定，绑定到组件类中的属性，用于自动同步用户选中的值，同时修正option的value绑定：

<select [(ngModel)]="selectedItem">
  <option *ngFor="let t of items" [value]="t">
    {{ t }}
  </option>
</select>

<button type="button" (click)="selectedValue()" class="btn btn-info btn-sm">
  Submit
</button>

3. 编写TS组件逻辑 #

先在组件类中声明绑定的选中值属性，注入HttpClient用于发起接口请求，实现对应方法即可：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  // 你组件的selector、template、styleUrls等原有配置保持不变
})
export class YourComponent {
  // 原有下拉选项数组，保持你原本的赋值逻辑
  items: string[] = [];
  // 存储下拉框选中值
  selectedItem: string = '';

  // 注入HTTP客户端
  constructor(private http: HttpClient) {}

  selectedValue() {
    // 直接读取双向绑定同步的选中值，传入更新方法
    this.updateValue(this.selectedItem);
  }

  updateValue(selectedVal: string) {
    // 按照你的接口要求调整请求方法、地址、传参格式
    this.http.post('你的后端更新接口地址', { value: selectedVal })
      .subscribe({
        next: (res) => {
          // 接口返回200 OK时的成功处理逻辑
          console.log('值更新成功', res);
          // 此处可添加成功提示、刷新页面数据等业务逻辑
        },
        error: (err) => {
          // 可选：处理请求异常逻辑
          console.error('更新失败', err);
        }
      })
  }
}

注意：使用HttpClient前需要在根模块或对应功能模块导入HttpClientModule

实现方式2：模板引用变量（无需导入FormsModule） #

如果不想引入FormsModule，可以直接给select标签加模板引用变量，点击时直接把选中值传入方法：

1. 修改模板 #

<select #selectBox>
  <option *ngFor="let t of items" [value]="t">
    {{ t }}
  </option>
</select>

<!-- 点击时直接传入select的value值 -->
<button type="button" (click)="selectedValue(selectBox.value)" class="btn btn-info btn-sm">
  Submit
</button>

2. 调整TS方法 #

直接接收传入的选中值即可，后续HTTP请求逻辑和方式1完全一致：

selectedValue(selectedVal: string) {
  this.updateValue(selectedVal);
}

// updateValue方法和HTTP请求逻辑和方式1相同

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