Angular中如何移除时间下拉框中早于当前时间的选项

方案一：组件内预处理时间数组（性能更优） #

在组件初始化时直接过滤掉早于当前时间的选项，避免每次渲染重复计算：

1. 计算当前时间的总分钟数（简化时间对比逻辑）
2. 将时间数组中的每个12小时制时间转换为总分钟数，与当前时间对比后过滤

// 组件.ts 文件
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-time-select',
  templateUrl: './time-select.component.html'
})
export class TimeSelectComponent implements OnInit {
  // 假设原始时间数组
  TimeInterval = ["03:00 AM", "04:30 AM", "05:00 AM", "06:15 AM", "01:00 PM"];
  filteredTimeIntervals: string[];
  selectedTime: string;

  ngOnInit(): void {
    // 计算当前时间的总分钟数
    const now = new Date();
    const currentTotalMinutes = now.getHours() * 60 + now.getMinutes();

    // 过滤时间数组
    this.filteredTimeIntervals = this.TimeInterval.filter(timeStr => {
      // 拆分时间部分和AM/PM标识
      const [timePart, period] = timeStr.split(' ');
      let [hours, minutes] = timePart.split(':').map(Number);

      // 转换为24小时制
      if (period === 'PM' && hours !== 12) {
        hours += 12;
      } else if (period === 'AM' && hours === 12) {
        hours = 0;
      }

      const timeTotalMinutes = hours * 60 + minutes;
      // 保留大于等于当前时间的选项
      return timeTotalMinutes >= currentTotalMinutes;
    });
  }
}

模板中绑定过滤后的数组：

<!-- 组件.html 文件 -->
<ng-select [items]="filteredTimeIntervals" [(ngModel)]="selectedTime">
  <ng-template ng-option-tmp let-item="item">
    {{ item | customtimeformat }}
  </ng-template>
</ng-select>

方案二：自定义过滤管道（适合动态场景） #

如果需要实时更新过滤结果（比如跟随时间推移自动刷新），可以自定义管道：

// filter-past-times.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterPastTimes'
})
export class FilterPastTimesPipe implements PipeTransform {
  transform(timeIntervals: string[]): string[] {
    if (!timeIntervals || timeIntervals.length === 0) {
      return [];
    }

    const now = new Date();
    const currentTotalMinutes = now.getHours() * 60 + now.getMinutes();

    return timeIntervals.filter(timeStr => {
      const [timePart, period] = timeStr.split(' ');
      let [hours, minutes] = timePart.split(':').map(Number);

      if (period === 'PM' && hours !== 12) hours += 12;
      if (period === 'AM' && hours === 12) hours = 0;

      return (hours * 60 + minutes) >= currentTotalMinutes;
    });
  }
}

记得在模块中声明这个管道，然后模板中使用：

<ng-select [items]="TimeInterval | filterPastTimes" [(ngModel)]="selectedTime">
  <ng-template ng-option-tmp let-item="item">
    {{ item | customtimeformat }}
  </ng-template>
</ng-select>

方案三：实时自动更新过滤结果 #

如果需要每分钟自动刷新过滤列表，结合interval和AsyncPipe实现：

// 组件.ts 文件
import { Component, OnInit } from '@angular/core';
import { interval, Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-time-select',
  templateUrl: './time-select.component.html'
})
export class TimeSelectComponent implements OnInit {
  TimeInterval = ["03:00 AM", "04:30 AM", "05:00 AM", "06:15 AM", "01:00 PM"];
  filteredTimeIntervals$: Observable<string[]>;
  selectedTime: string;

  ngOnInit(): void {
    // 每60秒刷新一次过滤结果
    this.filteredTimeIntervals$ = interval(60000).pipe(
      startWith(0), // 初始立即执行一次
      map(() => {
        const now = new Date();
        const currentTotalMinutes = now.getHours() * 60 + now.getMinutes();

        return this.TimeInterval.filter(timeStr => {
          const [timePart, period] = timeStr.split(' ');
          let [hours, minutes] = timePart.split(':').map(Number);

          if (period === 'PM' && hours !== 12) hours += 12;
          if (period === 'AM' && hours === 12) hours = 0;

          return (hours * 60 + minutes) >= currentTotalMinutes;
        });
      })
    );
  }
}

模板中使用AsyncPipe：

<ng-select [items]="filteredTimeIntervals$ | async" [(ngModel)]="selectedTime">
  <ng-template ng-option-tmp let-item="item">
    {{ item | customtimeformat }}
  </ng-template>
</ng-select>

注意事项 #

• 如果TimeInterval存储的不是字符串格式（比如Date对象），需要调整时间转换逻辑
• 确保customtimeformat管道对过滤后的时间仍能正常格式化显示
• 若需精确到秒的过滤，可在总分钟数计算中加入秒数转换（now.getSeconds() / 60）

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