如何在Angular中实现学生信息三个select下拉框的联动

我有一个包含学生信息（姓名、班级、分数）的数据网格，每行带复选框。用户选择单个/多个行节点后点击「显示信息」按钮，会弹出新窗口，里面有三个下拉框：分别显示所有学生姓名、班级、分数。目前基础功能正常，需要实现下拉框联动：选中某个学生姓名时，班级和分数下拉框自动匹配该学生的对应信息，无需手动选择。

以下是我的HTML代码：

<ng-template #studentInformationTemplate>
...
<div class= "row" style="margin-right: 40px">
   <div class="col form-group" id="StudentNameDiv">
         <label class= control-label" for=studentName"> Student Name </label>
         <select class="form-control input control id="StudentName" name="StudentName">
             <option *ngFor="let name of NameStudentTable" [value]="name">{{ name }} </option>
         </select>
   </div>


   <div class="col form-group" id="StudentClassDiv">
         <label class= control-label" for=studentClass"> Student Class</label>
         <select class="form-control input control id="StudentClass" name="StudentClass">
             <option *ngFor="let class of NameClassTable" [value]="class"> {{ class}} </option>
         </select>
   </div>
</div>
<div class= "row" style="margin-right: 40px">
   <div class="col form-group" id="StudentNameDiv">
         <label class= control-label" for=studentScore"> Student Score</label>
         <select class="form-control input control id="StudentClass" name="StudentScore">
             <option *ngFor="let score of NameScoreTable" [value]="score "> {{ score }} </option>
         </select>
    </div>
</div>
...
</ng-template>

解决方案 #

1. 修正HTML语法错误并添加绑定逻辑

原代码存在引号缺失、ID重复等问题，先修正并添加Angular双向绑定和事件监听：

<ng-template #studentInformationTemplate>
...
<div class="row" style="margin-right: 40px">
   <div class="col form-group" id="StudentNameDiv">
         <label class="control-label" for="studentName"> Student Name </label>
         <select class="form-control input-control" id="StudentName" name="StudentName" [(ngModel)]="selectedStudentName" (change)="syncStudentInfo()">
             <option *ngFor="let name of NameStudentTable" [value]="name">{{ name }} </option>
         </select>
   </div>

   <div class="col form-group" id="StudentClassDiv">
         <label class="control-label" for="studentClass"> Student Class</label>
         <select class="form-control input-control" id="StudentClass" name="StudentClass" [(ngModel)]="selectedStudentClass" disabled>
             <option *ngFor="let class of NameClassTable" [value]="class"> {{ class}} </option>
         </select>
   </div>
</div>
<div class="row" style="margin-right: 40px">
   <div class="col form-group" id="StudentScoreDiv">
         <label class="control-label" for="studentScore"> Student Score</label>
         <select class="form-control input-control" id="StudentScore" name="StudentScore" [(ngModel)]="selectedStudentScore" disabled>
             <option *ngFor="let score of NameScoreTable" [value]="score"> {{ score }} </option>
         </select>
    </div>
</div>
...
</ng-template>

• 添加[(ngModel)]实现双向数据绑定，同步选中值到组件变量
• 给姓名下拉框添加(change)事件，触发联动逻辑
• 可选：给班级、分数下拉框添加disabled，避免用户手动修改

2. 组件TS逻辑实现

核心是通过选中的姓名匹配对应的学生信息，同步到班级和分数下拉框。建议使用完整的学生数据集（而非拆分的三个独立数组），这样能保证数据关联的准确性：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 完整学生数据集：每个对象包含姓名、班级、分数
  studentList = [
    { name: '张三', class: '高一(1)班', score: 92 },
    { name: '李四', class: '高一(2)班', score: 87 },
    { name: '王五', class: '高一(1)班', score: 95 }
    // 更多学生数据...
  ];

  // 提取下拉框所需的独立列表（去重）
  NameStudentTable = [...new Set(this.studentList.map(s => s.name))];
  NameClassTable = [...new Set(this.studentList.map(s => s.class))];
  NameScoreTable = [...new Set(this.studentList.map(s => s.score))];

  // 绑定下拉框选中值
  selectedStudentName: string = '';
  selectedStudentClass: string = '';
  selectedStudentScore: number = 0;

  // 联动逻辑：选中姓名后同步班级和分数
  syncStudentInfo() {
    const matchedStudent = this.studentList.find(student => student.name === this.selectedStudentName);
    if (matchedStudent) {
      this.selectedStudentClass = matchedStudent.class;
      this.selectedStudentScore = matchedStudent.score;
    } else {
      // 未匹配到学生时清空班级和分数
      this.selectedStudentClass = '';
      this.selectedStudentScore = 0;
    }
  }
}

关键说明

• 必须引入FormsModule到你的模块中，否则ngModel无法生效：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他模块...
      FormsModule
    ]
  })
  export class YourModule { }
  

• 如果必须保留拆分的三个数组，需确保三个数组的索引对应同一学生（但这种方式容易出现数据不一致，不推荐）

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