Angular中根据下拉选中值实现关联学生分数的部分求和计算

核心逻辑基础 #

现有代码里的sel数组和教授列表是顺序一一对应的：模板中遍历教授列表时，索引j对应第j位教授，绑定的[(ngModel)]="sel[j]"会把该教授下拉框选中的学生id存入sel数组的第j个位置。
基于这个对应关系，要计算前3位教授对应的选中学生分数，不需要改动现有模板结构，只需要调整求和时的筛选范围即可。

具体改造步骤 #

• 修改组件内的total()方法，拆分全量求和、部分求和的计算逻辑：
  • 截取sel数组的前3位元素（对应前3位教授的选中值），过滤掉未选择产生的无效空值，得到需要参与部分求和的学生id列表
  • 分别用全量id列表、部分id列表匹配学生数据，累加对应分数
    改造后的代码为：

  total() {
    // 配置需要计算部分和的教授数量（前3位）
    const PARTIAL_TARGET_COUNT = 3;
    // 提取参与部分求和的选中学生id，过滤无效值
    const partialSelectedIds = this.sel
      .slice(0, PARTIAL_TARGET_COUNT)
      .map(item => +item)
      .filter(id => !Number.isNaN(id));
    
    // 计算部分分数总和
    this.partial = this.stud
      .filter(student => partialSelectedIds.includes(student.id))
      .reduce((acc, curr) => acc + curr.score, 0);
  
    // 保留原有全量求和逻辑，兼容现有功能
    const allValidSelectedIds = this.sel
      .map(item => +item)
      .filter(id => !Number.isNaN(id));
    this.totalScore = this.stud
      .filter(student => allValidSelectedIds.includes(student.id))
      .reduce((acc, curr) => acc + curr.score, 0);
  
    this.var = true;
  }
  

• 修改页面模板的展示逻辑，解开被注释的部分和展示代码：

  <div *ngIf="var">          
    <p>Total: {{totalScore}}<br>
    Partial sum: {{partial}}
    </p>  
  </div>
  

灵活调整说明 #

• 后续如果需要调整部分求和覆盖的教授范围，只需要修改slice方法的参数即可：比如要计算第2到第4位教授的分数，就把截取逻辑改成this.sel.slice(1, 4)（对应数组索引1、2、3，即第2到第4个教授的选中值）
• 增加的无效值过滤逻辑，是为了避免用户未在某个下拉框选择学生时，因空值转换为NaN导致的匹配失效、运行时报错问题。

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