Question

我一直在尝试学习Angular时创建一个简单的应用程序。该应用程序非常简单，只需在首页上获取员工列表，然后单击员工即可查看其详细信息。

该项目具有2个组件和1个服务： TableViewComponent ， ViewProfileComponent 和 DataService 。在首页上进行路由后，默认情况下将显示TableViewComponent。单击员工后，浏览器将导航到“ example.com/view/:id”和ViewProfileComponent。

这就是问题所在。当浏览器位于“主页”上时，DataService可以完美运行。将网址切换为“ / view /：id”后，DataService 函数“ private _findEmployeeById（）”返回未定义，而不是我需要的对象的键。再一次，它可以在主页上运行！

我一直在努力解决这一问题，但无法使其正常工作。我看过《英雄角游》，我认为它几乎是一样的，所以这就是为什么我找不到问题的原因。

这里是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做任何事情，因此可能有更好的基于firebase的方法来处理此问题，但这就是问题的症结所在。如果您不熟悉事件循环，则值得一看： https://www.youtube.com/watch?v=8aGhZQkoFbQ

无法从Angular中的Firebase获取对象的键

1 个答案: