Angular中基于日期过滤数组失效，请求技术协助

嘿，我来帮你梳理下这段代码没生效的原因，以及对应的修正方案~

问题点分析 #

你的代码主要有三个关键问题导致过滤逻辑失效：

• 变量作用域不匹配：你用var items定义了一个局部变量，但循环里却用this.items访问。如果这是Angular组件类中的代码，items应该作为类的属性声明（去掉var），否则this.items会是undefined，循环根本不会执行。
• 日期类型比较不严谨：items里的from是字符串格式的日期，直接和new Date()生成的Date对象比较，虽然JavaScript会尝试隐式转换，但这种方式很容易出现预期外的结果，必须把字符串转成Date对象后再做比较。
• filtered数组未正确初始化：你只写了filtered:[];，但没有赋值为空数组，此时filtered是undefined，调用push方法会直接报错，导致后续逻辑终止。

修正后的代码 #

首先，建议先定义一个类型接口让代码更规范（TypeScript特性）：

interface Item {
  createdBy: string;
  product: string;
  from: string;
  to: string;
}

然后在你的Angular组件类中编写逻辑：

// 声明为类的属性，无需var关键字
items: Item[] = [
 { createdBy: "suriyan", product: "tv", from: "2019-10-15T18:30:00.000Z", to: "2019-10-29T18:30:00.000Z" },
 { createdBy: "suriyan", product: "phone", from: "2019-10-19T18:30:00.000Z", to: "2019-10-29T18:30:00.000Z" }
];
// 正确初始化空数组，避免undefined报错
filtered: Item[] = [];

// 过滤方法，建议用Array.filter替代for循环，代码更简洁
filterItems() {
  const now = new Date();
  // 将字符串日期转为Date对象后再比较，确保类型一致
  this.filtered = this.items.filter(item => new Date(item.from) < now);
  console.log(this.filtered);
}

额外说明 #

• 调用filterItems()方法就能执行过滤逻辑了，比如在组件的ngOnInit钩子中调用：

ngOnInit(): void {
  this.filterItems();
}

• 如果你的场景是需要在模板中实时根据日期过滤，也可以考虑自定义Angular管道（Pipe），不过组件内的过滤逻辑已经能满足大多数场景需求啦。

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