Не могу получить ключ от объекта из Firebase в Angular

Question

Я пытался создать простое приложение, изучая Angular.Приложение простое: получить список сотрудников на домашней странице и просмотреть их подробную информацию, нажав на сотрудника.

Проект состоит из 2 компонентов и 1 службы: TableViewComponent , ViewProfileComponent и DataService .При маршрутизации на домашней странице TableViewComponent отображается по умолчанию.При щелчке сотрудника браузер переходит к «example.com/view/:id» и ViewProfileComponent.

Так что здесь проблема.Когда браузер находится на «домашней странице», DataService работает отлично.Когда URL-адрес переключен на «/ view /: id», функция DataService « private _findEmployeeById () » возвращает undefined вместо ключа нужного мне объекта.Еще раз, это работает на главной странице!

Я боролся с этим в течение нескольких дней и не могу заставить его работать.Я видел Angular Tour of Heroes и, на мой взгляд, он почти такой же, поэтому я не могу найти проблему.

Вот ссылка на полный проект на Github , может быть, будет легче понять проблему.

private _findEmployeeById(id: number): string {
    const ref = this.db.database.ref();
    let key: string;

    // Key returns undefined, when the URL is example.com/view/id
    // Works properly on home page (when the URL is example.com)
    ref.child('employee').orderByChild('id').equalTo(id).once('value', snap => {
      snap.forEach(data => {
        key = data.key;
      });
    });

    return key;
}

Есть идеи?

Answer 1

Вот ваш виновник:

ref.child('employee').orderByChild('id').equalTo(id).once('value', snap => {
    snap.forEach(data => {
    key = data.key;
    });
});

Этот бит кода асинхронный, что означает, что он не будет обработан сразу.Фактически, он скинет запрос, но затем с радостью перейдет к следующей вещи, которую он может обработать, а в вашем случае это return key.Когда дело доходит до return key, часть, которая фактически определяет значение ключа, еще не была обработана, поэтому вы получаете неопределенное значение.

private _findEmployeeById(id: number): Promise<string> {
  const ref = this.db.database.ref();
  let key: string;

  return ref.child('employee').orderByChild('id').equalTo(id).once('value').then(snap => {
    snap.forEach(data => {
      key = data.key;
    })
    return key;
  })
}

Это говорит, возвращает функцию, которая обещает вернуть значение, затем возвращает значение, когда оно разрешено.Вы заметите, что я обновил сигнатуру функции до обещания, которое в конечном итоге преобразуется в строку.Это будет иметь каскадные последствия для любого потребителя вашего метода.

Вместо:

const key = this._findEmployeeById(removeEmployee.id);

Вам нужно будет сделать

this._findEmployeeById(removeEmployee.id).then(key => {
   console.log(key);
})

Я также добавлю, я никогда ничего не делалс помощью firebase, так что, возможно, есть лучший способ решить эту проблему, но в этом суть вашей проблемы.Стоит посмотреть, если вы не знакомы с циклом событий: https://www.youtube.com/watch?v=8aGhZQkoFbQ