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)
  }

以上内容的输出

Array [{id：1} {id：2}] //样机

2

未定义

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

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

Answer 1

您是否尝试其他方法，例如使用过滤器而不是查找？

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

Answer 2

问题是===运算符，并且以某种方式，在函数中传递的id是字符串类型。奇怪，因为Angular并没有抱怨期望一个数字时收到一个字符串（根据类型提示）。

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'  
  }
}

工作DEMO

Answer 4

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

正如@bluppfisk 上面提到的，.find 的问题是到 string 类型的奇怪转换。

我通过添加 .toString() 解决了这个问题：

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

Array.find在Angular应用中不起作用;可以在控制台中运行

4 个答案: