Angular起止年份相同时结束年份自动加1并存入MySQL的实现问题

1. 模板代码修正 #

你贴出的两段下拉框代码完全重复，都是离校年份的配置，需要把第一段改为入学年份的绑定配置：

<!-- 入学年份下拉框 -->
<nb-select placeholder="Select Academic Year" 
            (ngModelChange)="getSelectedYear()" 
            id="enrollmentYear" name="enrollmentYear" 
            formControlName="TCyearEnrollmentCtrl"  
            [ngClass]="{'form-control-danger': 
          firstForm.controls['TCyearEnrollmentCtrl'].invalid && 
          (firstForm.controls['TCyearEnrollmentCtrl'].dirty || 
          firstForm.controls['TCyearEnrollmentCtrl'].touched)}">
  <nb-option value="{{years}}" *ngFor="let years of years_array">
    {{years}}
  </nb-option>
</nb-select>

<!-- 离校年份下拉框 -->
<nb-select placeholder="Select Academic Year" 
      (ngModelChange)="getSelectedYear()" 
      id="leavingYear" 
      name="leavingYear" 
      formControlName="TCyearLeavingCtrl" 
      [ngClass]="{'form-control-danger':firstForm.controls['TCyearLeavingCtrl'].invalid && 
         (firstForm.controls['TCyearLeavingCtrl'].dirty || 
          firstForm.controls['TCyearLeavingCtrl'].touched)}">
  <nb-option value="{{years}}" *ngFor="let years of years_array"> 
    {{years}}
  </nb-option>
</nb-select>

2. 逻辑代码调整 #

你原有逻辑的问题是在循环遍历年份数组时重复判断加1，应该先在获取到两个年份值之后就统一处理离校年份，同时提交表单时也要做最终校验，避免直接提交原始值到数据库：

// 年份数组建议初始化时只生成一次，不用每次选年份都重新生成
ngOnInit() {
  const now = new Date().getUTCFullYear();
  // 按需求生成1967到当前年份倒推55年的数组
  this.years_array = Array(55).fill("").map((v, idx) => now - idx);
}

getSelectedYear() {
  this.tranReqYear = [];
  const enrollmentCtrl = this.firstForm.controls.TCyearEnrollmentCtrl;
  const leavingCtrl = this.firstForm.controls.TCyearLeavingCtrl;
  
  if (!enrollmentCtrl.value || !leavingCtrl.value) return;
  
  this.startYear = Number(enrollmentCtrl.value);
  this.endYear = Number(leavingCtrl.value);

  // 提前统一处理入学、离校年份相同的情况
  let saveEndYear = this.endYear;
  if (this.startYear === this.endYear) {
    saveEndYear = this.endYear + 1;
    // 如果需要界面也同步显示+1后的年份，可以加下面这行，不需要的话就只在提交的时候处理
    // leavingCtrl.setValue(saveEndYear, {emitEvent: false});
  }

  // 生成年份区间数组，不用再在循环里判断年份相等的情况
  for (let info of this.years_array) {
    if (info >= this.startYear && info <= saveEndYear) {
      this.tranReqYear.push(info);
    }
  }
}

// 表单提交方法里再加一层校验，确保存数据库的是正确值
submitForm() {
  if (this.firstForm.invalid) return;
  const formValue = this.firstForm.getRawValue();
  const enrollYear = Number(formValue.TCyearEnrollmentCtrl);
  let leaveYear = Number(formValue.TCyearLeavingCtrl);
  // 最终提交前处理
  if (enrollYear === leaveYear) {
    leaveYear += 1;
  }
  // 把处理后的leaveYear传到接口存入MySQL即可
  const saveData = {
    ...formValue,
    TCyearLeavingCtrl: leaveYear
  };
  // 接下来调用接口提交saveData
}

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