如何在打字稿中访问它之外的函数变量..？

Question

这是我将从 firebase 数据库中获取图片值的函数，问题是如何将函数中的 pictures 变量访问到数组，以便我可以遍历它们并将其显示在我的 HTML 上。

cato(){
    var ref = firebase.database().ref("/images");
    var imgref = ref.orderByChild("name").equalTo("nature").once("child_added", function(snapshot) {
        var pictures = snapshot.val();
    });

Answer 1

once() 方法实际上有一种“承诺的味道”。

所以你可以这样做：

cato() {
     var pictures = null;
     var ref = firebase.database().ref("/images");
     ref.orderByChild("name").equalTo("nature").once("child_added")
         .then(function(snapshot) {
            pictures = snapshot.val();
         });
})

---

根据您的评论更新：

once() 方法是异步的并返回一个承诺。只有当这个承诺解决时，你才能获得snapshot 的值。如果您想从代码的另一部分调用cato() 函数，您需要注意cato() 函数也将是异步的。

以下方法可以解决问题（注意cato() 函数中的returns）：

cato() {
     var ref = firebase.database().ref("/images");
     return ref.orderByChild("name").equalTo("nature").once("child_added")
         .then(function(snapshot) {
            return snapshot.val();
         });
})

// Call the asynchronous cato() function from another part of the code

cato().then(function(picturesArray) {
   yourArray = picturesArray;
})

Answer 2

您可以将回调模式转换为基于承诺的模式，这样您就可以从回调中获取值，如下所示：

async cato(){
  const ref = firebase.database().ref("/images");
  const pictures = await new Promise((resolve, reject) => {
    ref.orderByChild("name").equalTo("nature").once("child_added", function (snapshot) {
      resolve(snapshot.val());
    });
  });
  return pictures;
}

然后你从你的组件中获取图片：

...
async someMethod() {
    this.pictures = await cato();
}

现在您可以在 html 中使用 pictures

---

注意：如果你的cato函数已经是一个组件的方法，你可以直接在你的cato函数中设置pictures属性。

async cato() {
  const ref = firebase.database().ref("/images");
  const snapshot = await ref.orderByChild("name").equalTo("nature").once("child_added");
  // snapshot is available now
  this.pictures = snapshot.val();
}