如何用Angular CLI管道筛选30天内开始的SupplyEvent事件？

我来帮你搞定这个筛选管道的问题，代码里有几个关键小错误导致它没正常工作，咱们一步步调整：

问题分析 #

1. 时间计算错误：你写的Date.now() + (30)只加了30毫秒，完全不是30天的范围，得转换成毫秒级的30天时长。
2. 上下文丢失：在filter里直接传this.toBegin会导致toBegin方法里的this指向异常，可能引发意外问题。
3. 筛选条件不完整：你只判断了事件开始时间大于等于当前+30，但我们需要的是从现在起30天内开始，也就是事件开始时间在「当前时间」到「当前时间+30天」之间。
4. 参数命名不规范：参数名SupplyEvent应该用小驼峰（supplyEvent），符合JavaScript/TypeScript的编码规范。

修正后的完整代码 #

import { Pipe, PipeTransform } from '@angular/core';
import { SupplyEvent } from "../../models/supplyEvent";

@Pipe({ name: 'toBeginFilter' })
export class ToBeginFilterPipe implements PipeTransform {
  // 改用箭头函数避免上下文丢失，同时修正参数命名
  private toBegin = (supplyEvent: SupplyEvent) => {
    const thirtyDaysInMs = 30 * 24 * 60 * 60 * 1000; // 计算30天对应的毫秒数
    const now = Date.now();
    // 筛选逻辑：事件开始时间在当前时间到未来30天之间
    return supplyEvent.dateStart >= now && supplyEvent.dateStart <= now + thirtyDaysInMs;
  }

  transform(supplyEvents: SupplyEvent[]): SupplyEvent[] {
    if (!supplyEvents) return []; // 返回空数组比原数据更安全，避免模板渲染报错
    return supplyEvents.filter(this.toBegin);
  }
}

关键改动说明 #

• 时间计算修正：30 * 24 * 60 * 60 * 1000准确算出30天的毫秒数，确保时间范围符合预期。
• 箭头函数绑定上下文：把toBegin改成箭头函数，保证在filter调用时它的上下文不会丢失，规避潜在的this指向问题。
• 完善筛选逻辑：增加supplyEvent.dateStart <= now + thirtyDaysInMs的判断，精准锁定未来30天内开始的事件。
• 空值处理优化：当输入supplyEvents为undefined时返回空数组，避免后续模板渲染可能出现的异常。

这样修改后，你的管道就能正确筛选出从当前时间起30天内开始的所有SupplyEvent事件了。

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