Angular双下拉框联动REST请求数据获取问题求助

问题分析 #

你遇到的核心问题是共用同一个selectHandler方法时，无法同时获取两个下拉框的选中值——因为每个下拉框的change事件只会传递自身的事件对象，另一个参数会是undefined，而且你原代码里的判断条件还重复写了moduleEvent.target.value == "ALL"，导致逻辑本身就有错误。

解决方案：用双向绑定实时同步选中值 #

最简洁的解决方式是利用Angular的双向数据绑定（[(ngModel)]），把两个下拉框的选中值直接绑定到组件类的变量上，这样不管哪个下拉框变化，都能直接获取到最新的两个选中值，再发起对应的API请求。

步骤1：修改模板文件（test.component.html）

给每个<select>添加[(ngModel)]绑定，并保持(change)事件调用selectHandler（不需要传事件参数了）：

<!-- 第一个下拉框：绑定到selectedModule -->
<select [(ngModel)]="selectedModule" (change)="selectHandler()">
  <option value="ALL">ALL</option>
  <option value="M1">M1</option>
  <!-- 其他模块选项 -->
</select>

<!-- 第二个下拉框：绑定到selectedGroup -->
<select [(ngModel)]="selectedGroup" (change)="selectHandler()">
  <option value="ALL">ALL</option>
  <option value="G1">G1</option>
  <!-- 其他分组选项 -->
</select>

<!-- 数据渲染区域 -->
<table>
  <tr *ngFor="let testcase of selectedGrpMod">
    <!-- 你的单元格内容 -->
  </tr>
</table>

步骤2：修改组件类文件（test.component.ts）

1. 定义两个变量存储下拉框的选中值，默认设为"ALL"；
2. 修改selectHandler方法，直接读取组件内的绑定变量，修正逻辑判断：

import { Component, OnInit } from '@angular/core';
import { DataService } from './path-to-your-data-service'; // 替换成你的服务路径

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  // 绑定下拉框的选中值，默认选中ALL
  selectedModule: string = "ALL";
  selectedGroup: string = "ALL";
  selectedGrpMod: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // 初始化时加载全部数据（可选）
    this.selectHandler();
  }

  selectHandler() {
    // 逻辑：任一下拉框选ALL，就请求全部数据
    if (this.selectedModule === "ALL" || this.selectedGroup === "ALL") {
      this.dataService.getTest().then(res => {
        this.selectedGrpMod = res;
      });
    } else {
      // 两个都选了具体值，就传入参数请求对应数据
      this.dataService.getTesByParam(this.selectedGroup, this.selectedModule).then(res => {
        this.selectedGrpMod = res;
      });
    }
  }
}

关键改进点 #

1. 双向绑定替代事件对象：不再依赖$event获取选中值，组件能实时同步两个下拉框的状态，避免了只能拿到单个下拉框值的问题；
2. 修正逻辑错误：原代码里重复判断了moduleEvent.target.value == "ALL"，现在改为正确的“任一下拉框为ALL”的判断；
3. 初始化加载（可选）：在ngOnInit里调用selectHandler，页面加载时就会自动请求全部数据，提升用户体验。

注意事项 #

• 确保你的DataService中getTesByParam方法的参数顺序和你调用时一致（这里是group在前，module在后，和你原代码保持一致）；
• 如果使用的是Angular 14+，确保在模块中导入了FormsModule（因为ngModel需要依赖这个模块），否则双向绑定会失效。

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