使用带有 CSS 背景属性和 url() 的 Firebase 存储图像 URL

Question

更新

我将forEach 包装在一个承诺中，以修复我所面临的中间错误，但我又回到了我开始的地方。我只是想在函数之间传递self.data 作为参数，但它没有解决任何问题。

更新

我认为我将 self.data 错误地返回到 loadData 但我不确定我做错了什么。

this.loadData = async function() {
    var db = firebase.firestore();

    // Disable deprecated features
    db.settings({
      timestampsInSnapshots: true
    });

    var docsRef = db.collection("pools").doc(window.currentPoolId).collection("list").where("active", "==", true).orderBy("date").limit(8);

    var counter = 0;

    var result = await docsRef.get();

    console.log("querySnapshot result: "+result);
    result.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
        self.data.push(doc.data());

        console.log("result.size: "+result.size);
        console.log("self.data.length: "+self.data.length);
        console.log("counter in loadData: "+counter);
        if(result.size - 1 == counter) {
            console.log("returning self data: "+JSON.stringify(self.data));
            return self.data;
        }

        counter++;
    });
}

上面的函数是这样调用的（我觉得因为作用域需要是window.pool.loadData，而不是this.loadData）：

var 结果 = 等待 window.pool.loadData(); console.log("result in populate else: "+result);

它输出：

result in populate else: undefined

更新

我很确定这是因为在我引用 window.pool 时尚未创建 pool global - 我想我在 pool @987654333 中使用 this 时遇到了问题@（因为这段代码在poolglobal object里面，但是我要再试一次。

使用this.data[this.total_boxes].downloadURL 后，我得到了相同的结果——它在console.log 消息中正确打印，但我得到同样的错误，说它是undefined。

我不确定我的实例化顺序是否有问题。

---

我正在尝试使用在将图像上传到firebase storage 后检索到的downloadURL。我正在尝试在 url() css 函数中使用它，但我收到一条错误消息：

TypeError: undefined is not an object (evaluating 'window.pool.data[window.pool.total_boxes].downloadURL')

我现在正在为iOS 构建cordova。我在我的javascript/css 中像这样使用downloadURL：

var item_box = document.createElement("div");
item_box.style.flex = "1 0 50%";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.style.borderBottom="2px solid #9a9a9a";

//THIS IS WHERE  I USE THE `downloadURL`, ALL OTHER CODE IS FUNCTIONAL
item_box.style.background = "no-repeat center/100% url("+window.pool.data[window.pool.total_boxes].downloadURL+")";

item_box.id = "item_box_"+this.total_boxes;

我在上面的代码之前有这三个控制台消息：

console.log("window.pool.data: "+JSON.stringify(window.pool.data));
console.log("window.pool.total_boxes: "+window.pool.total_boxes);
console.log("window.pool.data[0].downloadURL: "+JSON.stringify(window.pool.data[window.pool.total_boxes].downloadURL));

他们输出：

[Log] window.pool.data: [{"active":true,"date":"1544583167324","description":"Comp","downloadURL":"https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx","item":"Computer"}] (cordova.js, line 1732)
[Log] window.pool.total_boxes: 0 (cordova.js, line 1732)
[Log] window.pool.data[0].downloadURL: "https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx" (cordova.js, line 1732)

在item_box 元素被实例化（尚未添加到DOM）之后，我收到了这条控制台消息：

console.log("item_box.style.background: "+item_box.style.background);

它输出：

item_box.style.background: url("https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx") center center / 100% no-repeat

所以看来window.pool.data[window.pool.total_boxes].downloadURL 不是未定义的。

当我可以看到对象具有正确的数据时，为什么会收到 undefined is not an object 错误？

Answer 1

这最终成为一个“duh”的时刻，但这非常棘手，因为我是如何设置日志消息的。看起来这个值是未定义的，但实际上，它只是在下一次循环时才未定义（item_box 元素是在循环内创建的），因为循环变量变得大于数据数组的大小。

在我的代码中的某一时刻，我有：

for (var i = 1; (i * this.total_rows) < (9 * this.total_rows); i++) { ...

并且需要：

for (var i = 1; (i * this.total_rows) < ((dataz.length + 1) * this.total_rows); i++) { ...

注意9 是一个固定数字，因此它不会随着传入数据的大小而波动（参数代表this.data - dataz）。