Angular项目如何根据用户年龄筛选年份数组（最高年龄限制65岁）

核心逻辑为用户年龄 + 可选年数 ≤ 65岁，以此为条件筛选年份数组即可，你可以按照以下步骤修改代码：

1. 定义全量年份原始数组 #

不要直接用渲染数组存储全量选项，先单独存储全量原始数据，避免筛选后丢失完整选项：

// 全量年份选项，可根据实际业务补充更多年份
fullYears = [
  { year: 3, value: 3 },
  { year: 4, value: 4 },
  { year: 5, value: 5 },
  { year: 6, value: 6 },
  // 其他需要的年份选项
];
// 实际渲染到页面的数组
years = [];

2. 新增年份筛选方法 #

封装独立的筛选逻辑，方便多处调用：

filterYearsByAge() {
  const MAX_AGE_LIMIT = 65;
  // 把用户输入的年龄转为数字，避免字符串类型导致计算错误
  const userAge = Number(this.personAge);
  // 非法年龄的处理逻辑，可根据业务需求调整为返回空数组
  if (isNaN(userAge) || userAge < 0) {
    this.years = [...this.fullYears];
    return;
  }
  // 核心筛选逻辑
  this.years = this.fullYears.filter(item => userAge + item.year <= MAX_AGE_LIMIT);
}

3. 触发筛选逻辑 #

可以根据业务需求选择触发时机：

方案A：点击next按钮时触发 #

直接在你现有的next方法中调用筛选方法即可：

next() {
  this.personAge = (this.formGroup.get('formArray') as FormArray)
    .at(0)
    .get('birthDate').value;
  // 调用筛选方法更新渲染数组
  this.filterYearsByAge();
  this.period = this.myCarousel.slideCounter + 3;
}

方案B：用户输入年龄时实时筛选 #

在ngOnInit生命周期中监听输入框的数值变化，实时更新可选年份：

ngOnInit() {
  const birthDateControl = (this.formGroup.get('formArray') as FormArray).at(0).get('birthDate');
  birthDateControl.valueChanges.subscribe(val => {
    this.personAge = val;
    this.filterYearsByAge();
  });
}

按照以上逻辑实现后，你举的61岁用户的场景会自动保留3和4两个选项：

• 61+3=64 ≤65 → 保留
• 61+4=65 ≤65 → 保留
• 更大的年份会触发61+年数>65的条件，自动被过滤。

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