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

Вывод вышеуказанного:

Array [{id: 1} {id: 2}] // макет

2

не определено

Однако, если я использую DevTools для присвоения массива новой глобальной переменной, а затем запускаю ту же функцию find для этой переменной, он возвращает ожидаемый элемент.

Кроме того, если я вставлю оператор debugger непосредственно перед оператором return, я вижу, что this.sources по-прежнему является массивом из двух, но что s в определении функции find не определено. Похоже, JavaScript неправильно передает элементы Array в итерацию цикла.

Answer 1

это происходит, когда find не может найти ни одного совпадающего элемента в массиве, возвращает undefined и вызывает проблему, вы можете обработать это и сказать, что если вы не смогли найти ни одного совпадающего элемента, верните сообщение или что-то еще, например:

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 2

Проблема заключалась в операторе === и том факте, что как-то , передаваемый в функцию id, имел тип string.Странно, потому что Angular не жаловался на получение строки при ожидании числа (согласно подсказке типа).

Answer 3

Вы пробуете другой способ, например, использовать фильтр вместо поиска?

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