Angular按slug实现搜索功能失效返回undefined问题排查

问题根因 #

你的过滤逻辑存在3个语法层面的错误，导致最终赋值给categoriesS的结果不符合预期：

• Array.filter() 方法要求传入的回调函数必须返回布尔值，用来判定当前元素是否保留在结果数组中。你当前的箭头函数使用大括号包裹内部逻辑，但没有写return关键字返回判断结果，所有元素遍历后默认返回undefined，会被全部过滤
• 回调内部误用逗号运算符：item.slug == slug, console.log( this.categoriesS) 属于JS逗号表达式，会依次执行逗号分隔的语句，但整个表达式最终只返回最后一条语句的执行结果——console.log的返回值固定为undefined，完全没有将slug匹配的判断结果传递给filter
• 你在filter遍历的回调内部打印this.categoriesS，此时filter遍历还未执行完成，赋值操作尚未触发，打印时该变量自然是undefined

修复后代码 #

slug: string = '';
categoriesS!: any[];

categories: any[] = [
  {id: 1, name: "emploi", slug: "emploi"},
  {id: 2, name: "vehicule", slug: "auto-moto"},
];

filterAnnonces(slug: string){ 
  // 箭头函数不加大括号时会自动return后面的表达式结果
  this.categoriesS = this.categories.filter(item => item.slug === slug);
  // 等filter执行完成、赋值结束后再打印结果
  console.log('过滤结果：', this.categoriesS);
}

额外优化建议 #

• 相等判断建议使用===严格相等，替代==宽松相等，避免JS隐式类型转换导致的意外匹配问题
• 如果业务需要模糊匹配而非精确匹配，可以把判断条件改成item.slug.includes(slug)

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