Array.find 在 Angular 应用程序中不起作用;在控制台中工作

Question

我正在开发的 Angular 应用程序有一个SourceService，它首先从 API 端点获取源代码，将它们存储到内存中，并充当可由id检索的本地缓存。到目前为止一切顺利，我想。但是函数findSourceById总是返回undefined。为什么？

findSourceById(id: number): Source {
console.log(this.sources);
console.log(id);
console.log(this.sources.find(s => s.id === id));
return this.sources.find(s => s.id === id)
}

以上输出：

数组 [{id： 1} {id： 2}]//模型

阿拉伯数字

定义

但是，如果我使用 DevTools 将数组分配给新的全局变量，然后在该变量上运行相同的find函数，它确实会返回预期的元素。

此外，如果我在 return 语句之前插入debugger语句，我会看到this.sources仍然是两个数组，但find函数定义中的s是未定义的。看起来 JavaScript 错误地将 Array 元素传递到循环迭代中。

Answer 1

问题是===运算符，并且不知何故，函数中传递的id是字符串类型。奇怪，因为 Angular 没有抱怨在期待数字的同时收到字符串(根据类型提示(。

Answer 2

您是否尝试另一种方式，例如使用过滤器而不是查找？

return this.sources.filter(s => s.id === id)

Answer 3

当 find 在数组返回未定义中找到任何匹配的项目并导致问题时，就会发生这种情况，您可以处理它并说如果找不到任何匹配的项目返回消息或其他内容，例如：

findSourceById(id: number):Source | string{
console.log(this.sources);
console.log(id);
console.log(this.sources.find(s => s.id === id));
return typeof this.sources.find(s => s.id === id) !== 'undefined' ? this.sources.find(s => s.id === id) : 'element not found'  
}
}

工作演示

Answer 4

我在纯Javascript(不是Typescript(中遇到了这个问题。

如上所述@bluppfisk，.find的问题在于向string类型的奇怪转换。

我通过添加.toString()解决了它：

const mergedSources = sources.map((source) => ({
...source,
...sourcesFromDB.find(
(sourceFromDB) => sourceFromDB._id.toString() === source._id.toString(),
),
}));