如何在if else语句中移除数组元素并简化Angular时分选择逻辑

需求：

• 选择0小时时，仅显示15、30、45分钟选项
• 选择1、2、3、4小时时，显示0、15、30、45分钟选项

现有代码存在冗余的if else逻辑，希望简化并复用ngOnInit中初始化的minuteOptions数组，仅在选中0小时时移除其中的0选项。

待简化的if else代码 #

onHourChange(hours: number) {
  if (hours === 0) {
    this.minuteOptions = [
      { value: 15, display: '15' },
      { value: 30, display: '30' },
      { value: 45, display: '45' },
    ]
  } else if (hours === 1) {
    this.minuteOptions = [
      { value: 0, display: '00' },
      { value: 15, display: '15' },
      { value: 30, display: '30' },
      { value: 45, display: '45' },
    ];
  }
}

初始化数组代码 #

ngOnInit() {
  this.hourOptions = [
    { value: 0, display: '0' },
    { value: 1, display: '1' },
    { value: 2, display: '2' },
    { value: 3, display: '3' },
    { value: 4, display: '4' },
  ];
  this.minuteOptions = [
    { value: 0, display: '00' },
    { value: 15, display: '15' },
    { value: 30, display: '30' },
    { value: 45, display: '45' },
  ];
}

方案一：基于初始化数组直接过滤 #

直接利用已初始化的完整分钟数组做过滤，避免重复定义数组：

onHourChange(hours: number) {
  // 小时为0时过滤掉value=0的选项，否则返回完整数组（解构避免引用问题）
  this.minuteOptions = hours === 0 
    ? this.minuteOptions.filter(item => item.value !== 0)
    : [...this.minuteOptions];
}

方案二：用常量存储原始数据源（更稳妥） #

把完整的分钟选项定义为常量，确保每次操作都基于原始数据，避免意外修改：

// 组件类内定义常量存储完整分钟选项
private readonly FULL_MINUTE_OPTIONS = [
  { value: 0, display: '00' },
  { value: 15, display: '15' },
  { value: 30, display: '30' },
  { value: 45, display: '45' },
];

ngOnInit() {
  this.hourOptions = [
    { value: 0, display: '0' },
    { value: 1, display: '1' },
    { value: 2, display: '2' },
    { value: 3, display: '3' },
    { value: 4, display: '4' },
  ];
  this.minuteOptions = [...this.FULL_MINUTE_OPTIONS];
}

onHourChange(hours: number) {
  this.minuteOptions = hours === 0 
    ? this.FULL_MINUTE_OPTIONS.filter(item => item.value !== 0)
    : [...this.FULL_MINUTE_OPTIONS];
}

简化优势 #

• 消除冗余的数组重复定义，所有分钟选项基于同一数据源维护
• 逻辑清晰，仅通过过滤操作实现需求
• 修复了原代码未处理2、3、4小时的遗漏问题

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