Angular 5中如何实现类似SQL的'var%'前缀模糊数组过滤？

嘿，我来帮你调整这个过滤方法，实现你要的前缀模糊匹配效果，顺便还得提醒你原代码里的一个小坑！

先说说原代码的问题 #

你现在用===做精确匹配，而且把过滤后的结果直接覆盖了原始数组this.nagelplatten——这会导致第二次过滤时，只能基于上一次过滤后的小数据集筛选，原始数据直接丢了，这肯定不是你想要的对吧？

修改方案 #

1. 先保留原始数据集

首先得把原始的nagelplatten数据存到一个单独的变量里，比如originalNagelplatten，在组件初始化的时候赋值：

// 组件中新增变量存储原始数据
originalNagelplatten: Nagelplatten[];

// 在ngOnInit或者数据加载完成后赋值（假设你从服务端/本地获取数据）
ngOnInit() {
  // 模拟数据加载，实际替换成你的真实数据来源
  this.nagelplatten = [...你的原始数据集];
  this.originalNagelplatten = [...this.nagelplatten]; // 浅拷贝避免引用关联
}

2. 把精确匹配改成前缀模糊匹配

SQL里的LIKE 'var%'对应JavaScript的startsWith()方法，直接用它就能实现前缀匹配。如果需要忽略大小写，记得把匹配双方都转成统一大小写再比较。

区分大小写的前缀匹配

filter(typ: string) {
  console.log("Filter");
  // 从原始数据集中过滤，而非已过滤后的数组
  this.nagelplattenFiltered = this.originalNagelplatten.filter((nagel: Nagelplatten) => 
    nagel.Bezeichnung1.startsWith(typ)
  );
  // 更新展示用的数组
  this.nagelplatten = [...this.nagelplattenFiltered];
  console.log(JSON.stringify(this.nagelplattenFiltered));
  console.log("new: " + JSON.stringify(this.nagelplattenFiltered));
}

不区分大小写的前缀匹配

如果需要忽略输入和数据的大小写差异（比如输入"Var"也能匹配"varXXX"），可以这样改：

filter(typ: string) {
  console.log("Filter");
  const lowerCaseTyp = typ.toLowerCase();
  this.nagelplattenFiltered = this.originalNagelplatten.filter((nagel: Nagelplatten) => 
    nagel.Bezeichnung1.toLowerCase().startsWith(lowerCaseTyp)
  );
  this.nagelplatten = [...this.nagelplattenFiltered];
  console.log(JSON.stringify(this.nagelplattenFiltered));
  console.log("new: " + JSON.stringify(this.nagelplattenFiltered));
}

额外小提示 #

• startsWith()是ES6方法，Angular 5对应的TypeScript版本完全兼容，不用担心兼容性问题。
• 用扩展运算符[...数组]做浅拷贝，避免修改原始数据的引用；如果你的Nagelplatten是复杂嵌套对象，可能需要用JSON.parse(JSON.stringify(数组))做深拷贝。
• 如果后续需要任意位置的模糊匹配，可以把startsWith()换成includes()，但前缀匹配用startsWith()性能更好。

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